別のdivの上にスクロールした後にdivを表示するにはどうすればいいですか？

Question

divの先頭がヒットしたときにスティッキーヘッダーを表示しようとしていて、下の2番目のdivの先頭にヒットしたときに表示されません。

私のコードに間違いがありません：

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"); 
    } 
}); 

私は何かが& &演算子の使用では動作しませんが、私は何を見つけることができないと思います。また、説明するためにen codepenを作成しました。http://codepen.io/jeremyobriot/pen/zqdpyJ

助けを借りてありがとう！

Answer 1

これは意味ですか？ヘッダーは赤いボックス内でのみ表示されます。

ウィンドウのscrollTopがアイコンセットの上端よりも高く、バンドルの上端よりも低いかどうかを尋ねる声明を出しました。

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>