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，但只是浮动在页面中间。

然后我想，也许是因为我将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元素的默认显示属性。

粘性导航与视差横幅

1 个答案: