仅在移动设备上滚动到顶部时显示导航栏(引导程序 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(即<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

Answer 2

类"sticky-top"使导航栏粘在页面顶部，即使用户滚动也是如此。将其关闭可以解决您的问题。

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