如何在滚动到另一个 div 的顶部后显示 div？

Question

我试图让粘性 header 在 div 的顶部被击中时可见，然后在第二个 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

你是说这个？ header 仅在红色框内可见。

我做了一个声明，我问 window 的 scrollTop 是否高于 iconset 顶部并低于 bundle 顶部。

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>

如何在滚动到另一个 div 的顶部后显示 div？

How to show a div after scrolling to the top of another div?

html

css

jquery

operator-keyword