Feste div zwischen zwei div-Elementen

Question

Ich versuche ein festes div-Element zu erstellen, wenn die Bildlaufposition zwischen zwei div-Elementen liegt. Ich benutze diesen Code, um das feste Element zu erstellen:

var sidebar = $('.sidebar').offset().top; 

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

Ich weiß nicht, wie die feste Klasse zu entfernen, wenn der blaue div erreicht. Ich habe versucht, die aktuelle Position des blauen div zu bekommen und es in die if-Anweisung hinzu: var blueDiv = $('.bottom').offset().top:

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

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

Answer 1

Sie haben vergessen, die Höhe der Seitenleiste zu schließen, wenn Sie überprüft, ob die Sidebar erreicht bereits das blaue 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>