<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="header"> This is header </div> <div class="sidebar sticky"> This is side bar </div> <div class="content"> This is main content </div> <div class="footer"> <div class="sticky-stopper"></div> This is my footer </div> </div>

.container { width: 1000px; position: relative; } .header { clear: both; margin-bottom: 10px; border: 1px solid #000000; height: 90px; } .sidebar { float: left; width: 350px; border: 1px solid #000000; } .content { float: right; width: 640px; border: 1px solid #000000; height: 800px; } .footer { clear: both; margin-top: 10px; border: 1px solid #000000; height: 820px; }

$( document ).ready(function() { console.log( "document ready!" ); var $sticky = $('.sticky'); var $stickyrStopper = $('.sticky-stopper'); if (!!$sticky.offset()) { // make sure ".sticky" element exists var generalSidebarHeight = $sticky.innerHeight(); var stickyTop = $sticky.offset().top; var stickOffset = 0; var stickyStopperPosition = $stickyrStopper.offset().top; var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset; var diff = stopPoint + stickOffset; $(window).scroll(function(){ // scroll event var windowTop = $(window).scrollTop(); // returns number if (stopPoint < windowTop) { $sticky.css({ position: 'absolute', top: diff }); } else if (stickyTop < windowTop+stickOffset) { $sticky.css({ position: 'fixed', top: stickOffset }); } else { $sticky.css({position: 'absolute', top: 'initial'}); } }); } });