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

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

您将使用 CSS 媒体查询仅在移动设备上应用 position:sticky（即；

.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 而不是 max-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

Answer 2

即使用户滚动，“sticky-top”类也会使导航栏粘在页面顶部。取下它可以解决您的问题。

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