Question

下面的代码会生成一个粘性标题，一旦您向下滚动100px就会显示该标题。一旦到达页面的下半部分，如何关闭粘性标题？让我们说800px？

谢谢！

$(window).scroll(function() {
if ($(this).scrollTop() > 100){  
    $('header').addClass("sticky");
  }

  else{
    $('header').removeClass("sticky");
  }
})

Answer 1

你的意思是这样吗？

$(window).scroll(function() {
    if ($(this).scrollTop() > 100 && $(this).scrollTop() < 800) {  
        $('header').addClass("sticky");
    } else{
        $('header').removeClass("sticky");
    }
})

Answer 2

您可以为页面达到800px时添加另一个条件：

$(window).scroll(function() {
    if (($(this).scrollTop() > 100) && ($(this).scrollTop() < 800)){
         $('header').addClass("sticky");
    }
    else{
         $('header').removeClass("sticky");
    }
});

在我的例子中：

$(this).scrollTop()是表示视图顶部的变量
if statement的第一部分添加了100px添加的条件
if statement的第二部分添加了800px删除的条件

Answer 3

我建议只使用css。如果导航是粘性的，为什么不一直保持粘性，然后向主要内容持有者添加边距以为导航腾出空间。例如：如果桌面使用的导航高度为108px：

.main-content-holder{
    position:relative;
    display:block;
    margin-top:108px
}

然后使用媒体查询调整高度和/或位置。

如何切换粘性标题？

3 个答案: