Have a div cling to top of screen if scrolled down past it

Question

I have a div which  when my page is first loaded  is about 100px from the top  it holds some buttons etc  for the page    When a user scrolls past it  I would like the div to  follow  the user in that it attaches to the top of the screen  When the user returns to the top of the page  I want it back in its original position    Visualization - xxxxx is the div   Default  page load           User vertically scrolled well past it ---------                    ---------                               xxxxxxx   lt  after div reaches top of screen when  xxxxxxx                                 page is scrolled vertically  it stays                                          there ---------                    ---------

User · Answer

Use position fixed  and set the top 0 left 0 right 0 height 100px  and you should be able to have it  stick  to the top of the page    lt div style  position fixed top 0 left 0 right 0 height 100px   gt Some buttons lt  div gt

User · Answer

The trick is that you have to set it as position fixed  but only after the user has scrolled past it   This is done with something like this  attaching a handler to the window scroll event        Cache selectors outside callback for performance      var  window     window           stickyEl       the-sticky-div           elTop    stickyEl offset   top       window scroll function              stickyEl toggleClass  sticky    window scrollTop    gt  elTop             This simply adds a sticky CSS class when the page has scrolled past it  and removes the class when it s back up   And the CSS class looks like this     the-sticky-div sticky        position  fixed       top  0        EDIT- Modified code to cache jQuery objects  faster now

User · Answer

There was a previous question today  no answers  that gave a good example of this functionality   You can check the relevant source code for specifics  search for  toolbar    but basically they use a combination of webdestroya s solution and a bit of JavaScript    Page loads and element is position  static On scroll  the position is measured  and if the element is position  static and it s off the page then the element is flipped to position  fixed    I d recommend checking the aforementioned source code though  because they do handle some  gotchas  that you might not immediately think of  such as adjusting scroll position when clicking on anchor links

User · Answer

The trick to make infinity s answer work without the flickering is to put the scroll-check on another div then the one you want to have fixed   Derived from the code viixii com uses I ended up using this   function sticky relocate         var window top     window  scrollTop        var div top       sticky-anchor   offset   top      if  window top  gt  div top              sticky-element   addClass  sticky        else             sticky-element   removeClass  sticky         function           window  scroll sticky relocate       sticky relocate          This way the function is only called once the sticky-anchor is reached and thus won t be removing and adding the   sticky  class on every scroll event   Now it adds the sticky class when the sticky-anchor reaches the top and removes it once the sticky-anchor return into view   Just place an empty div with a class acting like an anchor just above the element you want to have fixed   Like so    lt div id  sticky-anchor  gt  lt  div gt   lt div id  sticky-element  gt Your sticky content lt  div gt    All credit for the code goes to viixii com

[javascript] Have a div cling to top of screen if scrolled down past it

Examples related to javascript

Examples related to html

Examples related to css