导航栏可见性点在自上而下滚动后自动调整

Navbar visibility point auto-adjusts after top-down scrolling

本文关键字：调整 滚动 自上而下 可见性 导航      更新时间：2023-09-26

将一个粘性导航栏(jsfiddle(放在一起，只有在用户从文档顶部向下滚动10px后才能看到。然而，正如在小提琴中看到的那样;用：

$(window).scroll(function () {
    if ($(this).scrollTop() > 10) {
     document.getElementById('navig').style.visibility = 'visible';

这仅在代码运行后的第一个实例中有效。在同一会话中，在随后的类似操作(完全向下滚动文档并再次向上滚动后(，导航栏的出现比 10px 更远。它仅在刷新(rereun(时再次工作，并且也仅在从上到下滚动的第一个实例时起作用。

另外，我希望效果作用于向上滚动，即。 当用户移过该点时，固定的导航栏应该在标题的底部变为绝对。从顶部滚动超过 10px 时，它应该隐藏。没有scrollBottom()函数，那么如何处理呢？

这个小提琴加载了jquery：https://jsfiddle.net/6ss64s7e/

如何解决这些问题？(对不起，我是JavaScript的新手(。

在返回到值position:absolute;之前，您必须删除添加的所有其他属性，因为它们不会自动删除 - 因此，您不再需要top:0;。

可以通过将空字符串传递给其值来删除 top:0; 属性，如下所示：

$('#navig').css({'position':'absolute','top':''});

有关滚动及其方向的检测，请参阅此问题。

相关文章：