javascript - 带有视差横幅的粘性导航

Question

我正在开发一个模拟服装网站。我有一个视差横幅和它下面的导航。我想要实现的是，一旦用户真正滚动过导航，导航就会停留在页面顶部。我能够让导航固定在页面顶部，但它仍然在横幅图片上。

这是 CSS

.banner {
  background-image: url('https://images.pexels.com/photos/896291/pexels-photo-896291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-size: cover;
  min-height: 100%;
  background-attachment: fixed;
}

nav {
  border-top: solid #000 1px;
  background-color: #fff;
  padding: 5px;
  margin: 0 0 50px 0;
}

.sticky {
    position: fixed;
    width: 100%;
    top:0;
    border-bottom: solid black 1px;
    box-shadow: 0 2px 5px dimgray;

}

这是 jQuery

    $(window).on('scroll', function() {
if($(window).scrollTop()) {
    $('nav').addClass('sticky');
} else {
    $('nav').removeClass('sticky');
}
})

And here's my fiddle 展示问题。

关于为什么会发生这种情况，我有一些理论。

一开始我以为可能是因为我的 top 设置为 0，但是当我更改值时它仍然触发了 .sticky，但只是 float 在页面中间。

然后我想，也许是因为我将 scrollTop() 附加到窗口。我试过像这样将它附加到导航

if($('nav').scrollTop()) {
   //add class
 }

那也没用。

提前感谢你们可能有的任何见解!

Answer 1

首先，您必须检查滚动顶部是否大于应该滚动到顶部的值。如果你这样做了，你应该能够向该元素添加一个类或删除它。 示例:

var slide = $('yourIdOrClassName').offset().top;
$(window).on('scroll', function() {
  if($(window).scrollTop() > slide) {
     $('nav').addClass('sticky');
  } else {
  $('nav').removeClass('sticky');
  }
});

您将需要一个具有 display: none; 属性的类和一个具有 display: block; 属性的类

display: none; 的属性表示该元素不会显示在页面上。 display: block 是 nav/div 元素的默认显示属性。