How to make div follow scrolling smoothly with jQuery

Question

In my container there are sections boxes  but the last one of these boxes should follow scrolling when none of the other boxes are visible   So  when user scrolls down  he sees a normal sidebar  but when user has went down enough  sidebar ends but the last box starts to follow on the top of the screen  I have seen this a lot on different kind of sites   My code at the moment     window  scroll function          each     follow-scroll   function            var eloffset     this  offset            var windowpos     window  scrollTop            if windowpos lt eloffset top                var finaldestination   0            else               var finaldestination   windowpos                      this  stop   animate   top  finaldestination  200

User · Answer

There s a fantastic jQuery tutorial for this at https   web archive org web 20121012171851 http   jqueryfordesigners com fixed-floating-elements    It replicates the Apple com shopping cart type of sidebar scrolling  The Google query that might have served you well is  fixed floating sidebar

User · Answer

I wrote a relatively simple answer for this   I have a table that s using one of the  sticky table header  plugins to stick right below a particular div on my page  but the menu to the left of the table didn t stick  as it s not part of the table    For my purposes  I knew the div that needed  stickiness  was always going to start at 385 pixels below the top of the window  so I created an empty div right above that    lt div id  stopMenu  class  stopMenu  gt  lt  div gt    Then ran this     window  scroll function          if     window  scrollTop    gt  385         extraPadding     window  scrollTop   - 385          stopMenu   css   padding-top   extraPadding         else            stopMenu   css   padding-top    0                As the user scrolls  it adds whatever the value of   window  scrollTop   is to the integer 385  then adds that value to the stopMenu div that s above the thing I want to stay focused   In the event the user scrolls all the way back up  I just set the extra padding to 0   This doesn t require the user to do anything IN CSS particularly  but it s kind of a nice effect to make a small delay  so I put the class  stopMenu  in as well    stopMenu      transition  all 0 1s

User · Answer

The solution can be boiled down to this   var el     follow-scroll    var elpos el offset   top    window  scroll function          var y   this  scrollTop        if y lt elpos  el stop   animate   top  0  500        else el stop   animate   top  y-elpos  500          I have changed the assignment of el because finding a single element by class is not a great habit to get in to   if you only want one element find it by id  if you want to iterate over a collection of elements then find them by class   please note - my answer here refers to the accepted answer at that time  it still is the accepted answer at the moment  but has since been edited and therefore my answer no longer  boils down  what you see in  Martti Lane s answer on this page  my answer  boils down  his original  accepted  answer  you can take a look at the edit history of  Martti s answer if you re interested in what I  boiled down

User · Answer

I needed the div to stop when it reach a certain object  so i did it like this   var el       followdeal        var elpos original   el offset   top        window  scroll function            var elpos   el offset   top          var windowpos     window  scrollTop            var finaldestination   windowpos          var stophere         filtering   offset   top   - 170          if windowpos lt elpos original    windowpos gt  stophere                finaldestination   elpos original              el stop   animate   top  10              else               el stop   animate   top  finaldestination-elpos original 10  500

User · Answer

Here is mine solution  hope it is plug-n-play enough too     Copy JS code part Add  slide-along-scroll  class to element you want Make pixel-perfect corrections in JS-code Hope you will enjoy it     x000D   x000D     SlideAlongScroll x000D  var SlideAlongScroll   function el    x000D    var  this   this  x000D    this el   el  x000D       elements original position x000D    this elpos original   el parent   offset   top    x000D       scroller timeout x000D    this scroller timeout  x000D       scroller calculate function x000D    this scroll   function     x000D         20px gap for beauty x000D      var windowpos     window  scrollTop     20  x000D         targeted destination x000D      var finaldestination   windowpos - this elpos original  x000D         define stopper object and correction amount x000D      var stopper        footer   offset   top        window  height   if you dont need it x000D      var stophere   stopper - el outerHeight   - this elpos original - 20  x000D         decide what to do x000D      var realdestination   0  x000D      if windowpos  gt  this elpos original    x000D        if finaldestination  gt   stophere    x000D          realdestination   stophere  x000D          else   x000D          realdestination   finaldestination  x000D          x000D        x000D      el css   top   realdestination     x000D       x000D       scroll listener x000D      window  on  scroll   function     x000D         debounce it x000D      clearTimeout  this scroller timeout   x000D         set scroll calculation timeout x000D       this scroller timeout   setTimeout function      this scroll       300   x000D        x000D       initial position  in case page is pre-scrolled by browser after load  x000D    this scroll    x000D     x000D     init action  little timeout for smoothness x000D    document  ready function     x000D        slide-along-scroll   each function i  el    x000D      setTimeout function el    new SlideAlongScroll el      300    el    x000D        x000D      x000D     part you need    x000D   slide-along-scroll   x000D    padding  20px  x000D    background-color   CCCCCC  x000D   transition  top 300ms ease-out  x000D   position  relative  x000D    x000D     just demo    x000D  div     x000D    box-sizing  border-box  x000D    x000D   side-column   x000D    float  left  x000D    width  20       x000D    x000D   main-column   x000D    padding  20px  x000D    float  right  x000D    width  75   x000D    min-height  1200px  x000D    background-color   EEEEEE  x000D    x000D   body     x000D    padding  20px 0    x000D    x000D   body after   x000D    content       x000D    clear  both  x000D    display  table  x000D    x000D   header   x000D    padding  20px  x000D    text-align  center  x000D    border-bottom  2px solid  CCCCCC    x000D    x000D   footer   x000D    padding  20px  x000D    border-top  2px solid  CCCCCC  x000D    min-height  300px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div gt  x000D     lt div class  header  gt  x000D         lt h1 gt Your super-duper website lt  h1 gt  x000D     lt  div gt  x000D     lt div class  body  gt    x000D       lt div class  side-column  gt  x000D           lt  -- part you need -- gt  x000D           lt div class  slide-along-scroll  gt  x000D              Side menu content x000D               lt ul gt  x000D                  lt li gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  lt  li gt  x000D                  lt li gt Aliquam tincidunt mauris eu risus  lt  li gt  x000D                  lt li gt Vestibulum auctor dapibus neque  lt  li gt  x000D               lt  ul gt           x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  main-column  gt  x000D          Main content area  1200px  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  footer  gt  x000D        Footer  slide along is limited by it  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This worked for me like a charm   JavaScript     function       doc ready     if      browser     msie   amp  amp    browser version  lt  7             var target     floating   top     target  offset   top - parseFloat   target  css  margin-top   replace  auto   0              window  scroll function event                if  top  lt     this  scrollTop                        target  addClass  fixed                  else                     target  removeClass  fixed                                          CSS    floating fixed      position fixed      top 0      Source  http   jqueryfordesigners com fixed-floating-elements

User · Answer

This is my final code       based on previous fixes  thank you big time for headstart  saved a lot of time experimenting   What bugged me was scrolling up  as well as scrolling down         it always makes me wonder how jquery can be elegant       document  ready function           run once     var el     scrolldiv        var originalelpos el offset   top     take it where it originally is on the page        run on scroll        window  scroll function            var el       scrolldiv       important   local          var elpos   el offset   top     take current situation         var windowpos     window  scrollTop            var finaldestination   windowpos originalelpos          el stop   animate   top  finaldestination  500

User · Answer

That code doesn t work very well i fixed it a little bit  var el       caja-pago    var elpos original   el offset   top      window  scroll function         var elpos   el offset   top       var windowpos     window  scrollTop         var finaldestination   windowpos       if windowpos lt elpos original             finaldestination   elpos original           el stop   animate   top  400  500          else            el stop   animate   top  windowpos 10  500

User · Answer

This one is same on facebook   x000D   x000D   lt script gt  x000D  var valX     window  scrollTop    x000D  function syncScroll target   x000D   var valY     window  scrollTop    x000D   var difYX   valY - valX  x000D   var targetX     target  scrollTop    x000D   if valY  gt  valX   x000D      target  scrollTop difYX   x000D     x000D   if difYX  lt   0   x000D      target  scrollTop -20   x000D     x000D    x000D   x000D    window  scroll function    x000D   syncScroll   demo    x000D     x000D   lt  script gt  x000D  body  x000D    margin 0  x000D    padding 0  x000D    height 100   x000D    x000D   demo  x000D    position fixed  x000D    height 100vh  x000D    overflow hidden  x000D    width 40   x000D    x000D   content  x000D    position relative  x000D    float right  x000D    width 60   x000D    color red   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt body gt  x000D     lt div id  demo  gt  x000D       lt ul gt  x000D         lt li gt  x000D           lt p gt  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   lt  p gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt p gt  x000D   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt  Neque porro quisquam est  qui dolorem ipsum quia dolor sit amet  consectetur  adipisci velit  sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem  Ut enim ad minima veniam  quis nostrum exercitationem ullam corporis suscipit laboriosam  nisi ut aliquid ex ea commodi consequatur  Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur   x000D           lt  p gt  x000D         lt  li gt    x000D         lt li gt  x000D           lt p gt  x000D   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system  and expound the actual teachings of the great explorer of the truth  the master-builder of human happiness  No one rejects  dislikes  or avoids pleasure itself  because it is pleasure  but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful  Nor again is there anyone who loves or pursues or desires to obtain pain of itself  because it is pain  but because occasionally circumstances occur in which toil and pain can procure him some great pleasure  To take a trivial example  which of us ever undertakes laborious physical exercise  except to obtain some advantage from it  But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences  or one who avoids a pain that produces no resultant pleasure   x000D           lt  p gt  x000D         lt  li gt  x000D       lt ul gt  x000D     lt  div gt  x000D     lt div id  content  gt  x000D       lt ul gt  x000D         lt li gt  x000D           lt p gt  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   lt  p gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt p gt  x000D   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt  Neque porro quisquam est  qui dolorem ipsum quia dolor sit amet  consectetur  adipisci velit  sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem  Ut enim ad minima veniam  quis nostrum exercitationem ullam corporis suscipit laboriosam  nisi ut aliquid ex ea commodi consequatur  Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur   x000D           lt  p gt  x000D         lt  li gt    x000D         lt li gt  x000D           lt p gt  x000D   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system  and expound the actual teachings of the great explorer of the truth  the master-builder of human happiness  No one rejects  dislikes  or avoids pleasure itself  because it is pleasure  but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful  Nor again is there anyone who loves or pursues or desires to obtain pain of itself  because it is pain  but because occasionally circumstances occur in which toil and pain can procure him some great pleasure  To take a trivial example  which of us ever undertakes laborious physical exercise  except to obtain some advantage from it  But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences  or one who avoids a pain that produces no resultant pleasure   x000D           lt  p gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt p gt  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   lt  p gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt p gt  x000D   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt  Neque porro quisquam est  qui dolorem ipsum quia dolor sit amet  consectetur  adipisci velit  sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem  Ut enim ad minima veniam  quis nostrum exercitationem ullam corporis suscipit laboriosam  nisi ut aliquid ex ea commodi consequatur  Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur   x000D           lt  p gt  x000D         lt  li gt    x000D         lt li gt  x000D           lt p gt  x000D   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system  and expound the actual teachings of the great explorer of the truth  the master-builder of human happiness  No one rejects  dislikes  or avoids pleasure itself  because it is pleasure  but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful  Nor again is there anyone who loves or pursues or desires to obtain pain of itself  because it is pain  but because occasionally circumstances occur in which toil and pain can procure him some great pleasure  To take a trivial example  which of us ever undertakes laborious physical exercise  except to obtain some advantage from it  But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences  or one who avoids a pain that produces no resultant pleasure   x000D           lt  p gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt p gt  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   lt  p gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt p gt  x000D   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt  Neque porro quisquam est  qui dolorem ipsum quia dolor sit amet  consectetur  adipisci velit  sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem  Ut enim ad minima veniam  quis nostrum exercitationem ullam corporis suscipit laboriosam  nisi ut aliquid ex ea commodi consequatur  Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur   x000D           lt  p gt  x000D         lt  li gt    x000D         lt li gt  x000D           lt p gt  x000D   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system  and expound the actual teachings of the great explorer of the truth  the master-builder of human happiness  No one rejects  dislikes  or avoids pleasure itself  because it is pleasure  but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful  Nor again is there anyone who loves or pursues or desires to obtain pain of itself  because it is pain  but because occasionally circumstances occur in which toil and pain can procure him some great pleasure  To take a trivial example  which of us ever undertakes laborious physical exercise  except to obtain some advantage from it  But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences  or one who avoids a pain that produces no resultant pleasure   x000D           lt  p gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt p gt  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   lt  p gt  x000D         lt  li gt  x000D         lt li gt  x000D           lt p gt  x000D   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt  Neque porro quisquam est  qui dolorem ipsum quia dolor sit amet  consectetur  adipisci velit  sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem  Ut enim ad minima veniam  quis nostrum exercitationem ullam corporis suscipit laboriosam  nisi ut aliquid ex ea commodi consequatur  Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur   x000D           lt  p gt  x000D         lt  li gt    x000D         lt li gt  x000D           lt p gt  x000D   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system  and expound the actual teachings of the great explorer of the truth  the master-builder of human happiness  No one rejects  dislikes  or avoids pleasure itself  because it is pleasure  but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful  Nor again is there anyone who loves or pursues or desires to obtain pain of itself  because it is pain  but because occasionally circumstances occur in which toil and pain can procure him some great pleasure  To take a trivial example  which of us ever undertakes laborious physical exercise  except to obtain some advantage from it  But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences  or one who avoids a pain that produces no resultant pleasure   x000D           lt  p gt  x000D         lt  li gt  x000D       lt ul gt  x000D      lt  div gt     x000D   lt  body x000D   x000D   x000D

User · Answer

Since this question is getting a lot of views and the tutorial linked in the most voted answer appears to be offline  I took the time to clean up this script   See it live here  JSFiddle  JavaScript    function          var element       follow-scroll            originalY   element offset   top          Space between element and top of screen  when scrolling      var topMargin   20          Should probably be set in CSS  but here just for emphasis     element css  position    relative           window  on  scroll   function event            var scrollTop     window  scrollTop             element stop false  false  animate               top  scrollTop  lt  originalY                       0                       scrollTop - originalY   topMargin            300              jQuery

[jquery] How to make div follow scrolling smoothly with jQuery?

Examples related to jquery

Examples related to scroll