Question

我想仅在用户滚动到页面顶部时才在移动设备上显示导航栏。

每当用户向下或向上滚动时，它就会卡在顶部。我正在使用此处的代码：https://stackoverflow.com/a/42250478/1788961 以下是示例：https://www.codeply.com/go/H7ZKuxKTKm

我的JS代码：

new IntersectionObserver(function(e,o){
        if (e[0].intersectionRatio > 0){
            document.documentElement.removeAttribute('class');
        } else {
            document.documentElement.setAttribute('class','stuck');
        };
    }).observe(document.querySelector('.trigger'));

编辑：澄清我想要的内容：

我不希望移动设备上的导航栏变得粘稠。它应该滚动到网站的其余部分。但如果我在页面底部并滚动到顶部，只要我滚动到顶部，导航栏就会出现在顶部并保持在那里。

Answer 1

即使用户滚动，“粘贴顶”类也会使导航栏粘在页面顶部。脱掉它可以解决你的问题。

此处示例：https://www.codeply.com/go/wWKGkjYdGy

Answer 2

您将使用CSS媒体查询仅在移动设备上应用position:sticky（即;＆lt; 768px）......

.sticky-top {
    position: static;
}

@media (max-width:768px) {
    .sticky-top {
        transition: all 0.25s ease-in;
        position: sticky;
    }

    .stuck .sticky-top {
        background-color: #222 !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}

https://www.codeply.com/go/1b80jD3Tpg

如果你想要相反的效果（移动设备上的非粘性导航栏），只需将媒体查询反转为min-width而不是最大宽度......

@media (min-width:768px) {
    .sticky-top {
        transition: all 0.25s ease-in;
        position: sticky;
    }

    .stuck .sticky-top {
        background-color: #222 !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}

https://www.codeply.com/go/4RtpB24k23

仅在移动设备上滚动到顶部时显示导航栏（Bootstrap 4）

2 个答案: