Fixed div between two div elements

Question

I am trying to create a fixed div element when the scroll position is between two div elements. I use this code to create a fixed element:

var sidebar = $('.sidebar').offset().top; $(window).scroll(function() { if ($(window).scrollTop() > sidebar) { $('.sidebar').addClass('fixed'); }else{ $('.sidebar').removeClass('fixed'); } }); 

I do not know how to remove a fixed class when reaching a blue div. I tried to get the current position of the blue div and add it to the if: var blueDiv = $('.bottom').offset().top : statement:

 if ($(window).scrollTop() > sidebar && $(window).scrollTop() < blueDiv ){ // add fixed class }else{ // remove fixed class } 

Fiddle: https://jsfiddle.net/L7p5yeet/

Answer 1

You forgot to specify the height of the sidebar when checking if the sidebar has already reached the blue div:

 var sidebar = $('.sidebar').position().top; var blueDiv = $('.bottom').position().top - $('.sidebar').innerHeight(); $(window).scroll(function() { var sT = $(window).scrollTop(); if (sT > sidebar && sT < blueDiv) { $('.sidebar').addClass('fixed'); }else{ $('.sidebar').removeClass('fixed'); } }); 

Answer 2

 var sidebar = $('.sidebar').offset().top; var blueOffset = $('.bottom').offset().top; var sidebarHeight = $('.sidebar').height(); // If you reached the blue div (bottom), remove the 'fixed' class. Because the fixed element may not scroll over the footer or blue div. If you scroll back to the top (before the blue div or between the sidebar and the blue div) the fixed class need to be added again. $(window).scroll(function() { if ($(window).scrollTop() > sidebar) { $('.sidebar').addClass('fixed'); } else { $('.sidebar').removeClass('fixed'); } if ($(window).scrollTop() > blueOffset - sidebarHeight) { $('.sidebar').removeClass('fixed'); } }); 

 body { margin: 0; padding: 0; } .fixed { position: fixed; width: inherit; overflow: hidden; background: red; top: 0; } .topbar { background: red; height: 85px; text-align: center; line-height: 85px; color: #fff; } .container { width: 100%; overflow: hidden; } .left { float: left; width: 75%; background: gray; height: 800px; } .right { float: left; width: 25%; background: black; color: #fff; } .bottom { width: 100%; background: blue; overflow: hidden; height: 200px; line-height: 200px; color: #fff; text-align: center; } .footer { height: 600px; color: #000; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="topbar"> <p> A simple topbar </p> </div> <div class="container"> <div class="left"> <p> Start fixed element </p> </div> <div class="right"> <div class="sidebar"> <ul> <li>Menu item 1</li> <li>Menu item 1</li> </ul> </div> </div> <div class="bottom"> <p> Remove fixed element </p> </div> </div> <div class="footer"> <p> A simple footer </p> </div>