javascript - 自上而下滚动后导航栏可见点自动调整

Question

组合了一个粘性导航栏 ( jsfiddle )，仅在用户从文档顶部向下滚动 10 像素后才可见。然而正如 fiddle 中所见；使用:

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

这仅在代码运行后的第一个实例中有效。在同一 session 中的后续类似操作中(完全向下滚动文档并再次向上滚动)，导航栏的显示位置会比 10 像素更远。它仅在刷新(重新重新运行)时再次起作用，并且仅在第一个从上到下滚动的实例中起作用。

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

这个 fiddle 已加载jquery:https://jsfiddle.net/6ss64s7e/

如何解决这些问题？ (抱歉，我是 JavaScript 新手)。

Answer 1

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

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

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

滚动及其方向的检测，参见this question .