Wie zeigt man ein Div nach dem Scrollen an die Spitze eines anderen div?

Question

Ich versuche, einen sticky header sichtbar zu machen, wenn der Anfang eines divs getroffen wird, und dann unsichtbar, wenn der obere Teil eines zweiten divs darunter steht

Ich kann nicht herausfinden, was mit meinem Code nicht stimmt:

var iconsetTop = $('.icon-sets').offset().top; 
var bundleTop = $('.bundle-offer').offset().top; 

$(window).on('scroll', function(){ 
    if ((iconsetTop >= $(window).scrollTop()) && (bundleTop >= $(window).scrollTop())){ 
     $('.set-header').css("top","-20%"); 
    } else { 
     $('.set-header').css("top","0"); 
    } 
}); 

ich glaube, etwas ist mit der Verwendung der & & Betreiber nicht funktioniert, aber ich kann nicht herausfinden, was. Außerdem habe ich en compen erstellt, um zu veranschaulichen: http://codepen.io/jeremyobriot/pen/zqdpyJ

Dank im Voraus für die Hilfe!

Answer 1

Sie meinen das? Die Kopfzeile ist nur in der roten Box sichtbar.

Ich habe eine Aussage gemacht, wo ich frage, ob scrollTop des Fensters höher ist als das Iconset oben und niedriger als das Bündel oben.

var iconsetTop = $('.icon-sets').offset().top; 
 
var bundleTop = $('.bundle-offer').offset().top; 
 

 
$(window).on('scroll', function() { 
 
    if ($(window).scrollTop() >= iconsetTop && $(window).scrollTop() <= bundleTop) { 
 
    $('.set-header').css("top", "0"); 
 
    } else { 
 
    $('.set-header').css("top", "-20%"); 
 
    } 
 
});

body { 
 
    margin:0; 
 
} 
 

 
.set-header { 
 
    height: 50px; 
 
    background-color: black; 
 
    position: fixed; 
 
    width: 100%; 
 
    top: -20%; 
 
} 
 

 
.space { 
 
    height: 100px; 
 
    background-color: blue; 
 
} 
 

 
.icon-sets { 
 
    height: 500px; 
 
    background-color: IndianRed; 
 
} 
 

 
.bundle-offer { 
 
    height: 1000px; 
 
    background-color: pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="set-header"></div> 
 
<div class="space"></div> 
 
<div class="icon-sets"></div> 
 
<div class="bundle-offer"></div>