Side Menu Scroll Stops at Header Then Scroll Again

Really simple concept today folks! A sidebar that "follows" as you whorl downward a page. There are a number of means to go about it. We'll embrace 2: CSS and JavaScript (jQuery) with a bonus CSS trick.

View Demo   Download Files

CSS

The easiest way to handle this is but to use CSS fixed positioning. Our sidebar is within a #page-wrap div with relative positioning, so the sidebar will set within there, then we but button it over into place with margin.

          #folio-wrap {    width: 600px;    margin: 15px auto;    position: relative;  }  #sidebar {    width: 190px;    position: fixed;    margin-left: 410px;  }        

With this technique, the sidebar stays solidly in identify as you scroll downward the page.

jQuery

If nosotros employ JavaScript, we tin can measure how far down the window the user has scrolled later on a window.roll issue. If that distance is further than the starting tiptop position of the sidebar, we tin can adapt the top margin of the sidebar to push it down into visible range.

Optimized past Doug Neiner:

          $(office() {      var $sidebar   = $("#sidebar"),          $window    = $(window),         offset     = $sidebar.beginning(),         topPadding = fifteen;      $window.scroll(part() {         if ($window.scrollTop() > offset.top) {             $sidebar.end().animate({                 marginTop: $window.scrollTop() - offset.superlative + topPadding             });         } else {             $sidebar.terminate().animate({                 marginTop: 0             });         }     });      });        

There is no particular advantage hither other than the cool animated consequence we become, which will certainly draw attention to it.

Bonus "reveal" technique

On Tim Van Damme's Maxvoltar.com individual blog posts have a special sidebar with a fun "reveal" issue when the page is scrolled down.

The trick is to take a header area with a solid background sit on top of the sidebar, which is pulled upwards underneath it. You lot could employ negative meridian margin to practice information technology or adjust the top positioning value. And so an alpha transparent white-fade prototype is carefully placed at the elevation of the sidebar, and besides z-index'd above information technology. So when the top of the sidebar, hidden past the header, slides downwards into view the white-fade image "reveals" it.

          /* Negative top margin on sidebar pulls upwardly header under title-expanse */ #sidebar {    width: 190px;    position: fixed;    margin: -135px 0 0 410px;  }  /* Championship surface area kept above all with z-index */ #championship-area {    background: white;    position: relative;    z-index: 3000;  }  /* white-fade image */ #reveal {    position: absolute;    correct: 0;    bottom: -20px;  }        

Concerns

In any of these techniques, nosotros are essentially dealing with fixed positioning. Fixed positioning "real" content (equally opposed to, for case, a groundwork image) is slightly dangerous territory. We need to be very sure that the content nosotros are fixed positioning will never be taller than the viewable expanse of even a very minor monitor. If the summit were to exceed that visible expanse, information technology would exist completely hidden an inaccessible, across the edge of the browser window. With non-stock-still positioned elements, that overhang would trigger a scrollbar, stock-still position elements do not.

Cross-Browser Hoo-Hah

This should piece of work in "all" browsers. For IE 6 and IE vii I put in some conditional comments for some extra CSS to get them to behave. Feel free to view source in the demo to check that out. This is a nice demo to reference for stock-still positioning in IE 6 (basically you need to have an extra outer wrap of the page and utilise absolute positioning to fake it).

MooTools

David Walsh in on the case with a MooTools version of the Scrolling Sidebar.

jQuery Plugin

There is besides a jQuery plugin in the repository that accomplishes this aforementioned thing, with a bonus cool feature where it stops before hitting the footer.

That link is now broken, but hither'south a big roundup of jQuery plugins that practise the same type of thing.

hensleybriat1936.blogspot.com

Source: https://css-tricks.com/scrollfollow-sidebar/

Share this post