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 sc

Answer 1

Here is mine solution (hope it is plug-n-play enough too):

1. Copy JS code part
2. Add 'slide-along-scroll' class to element you want
3. Make pixel-perfect corrections in JS-code
4. Hope you will enjoy it!

// SlideAlongScroll
var SlideAlongScroll = function(el) {
  var _this = this;
  this.el = el;
  // elements original position
  this.elpos_original = el.parent().offset().top;  
  // scroller timeout
  this.scroller_timeout;
  // scroller calculate function
  this.scroll = function() {
    // 20px gap for beauty
    var windowpos = $(window).scrollTop() + 20;
    // targeted destination
    var finaldestination = windowpos - this.elpos_original;
    // define stopper object and correction amount
    var stopper = ($('.footer').offset().top); // $(window).height() if you dont need it
    var stophere = stopper - el.outerHeight() - this.elpos_original - 20;
    // decide what to do
    var realdestination = 0;
    if(windowpos > this.elpos_original) {
      if(finaldestination >= stophere) {
        realdestination = stophere;
      } else {
        realdestination = finaldestination;
      }
    }
    el.css({'top': realdestination });
  };
  // scroll listener
  $(window).on('scroll', function() {
    // debounce it
    clearTimeout(_this.scroller_timeout);
    // set scroll calculation timeout
    _this.scroller_timeout = setTimeout(function() { _this.scroll(); }, 300);
  });
  // initial position (in case page is pre-scrolled by browser after load)
  this.scroll();
};
// init action, little timeout for smoothness
$(document).ready(function() {
  $('.slide-along-scroll').each(function(i, el) {
    setTimeout(function(el) { new SlideAlongScroll(el); }, 300, $(el));
  });
});

/* part you need */
.slide-along-scroll {
  padding: 20px;
  background-color: #CCCCCC;
	transition: top 300ms ease-out;
	position: relative;
}
/* just demo */
div {  
  box-sizing: border-box;
}
.side-column {
  float: left;
  width: 20%;    
}
.main-column {
  padding: 20px;
  float: right;
  width: 75%;
  min-height: 1200px;
  background-color: #EEEEEE;
}
.body {  
  padding: 20px 0;  
}
.body:after {
  content: ' ';
  clear: both;
  display: table;
}
.header {
  padding: 20px;
  text-align: center;
  border-bottom: 2px solid #CCCCCC;  
}
.footer {
  padding: 20px;
  border-top: 2px solid #CCCCCC;
  min-height: 300px;
}

  

      
Your super-duper website
  
  
  
    

        
        

            Side menu content
            

               
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
               
Aliquam tincidunt mauris eu risus.
               
Vestibulum auctor dapibus neque.
            
         
        
    
    

        Main content area (1200px)
    
  
  

      Footer (slide along is limited by it)