javascript - 如何阻止 div 在首页加载时意外加载？

Question

我的网站有一个内容导航栏，该栏应该仅在用户向下滚动页面 800px 后显示。我正在使用此 JS 代码来实现此行为:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $("#pn-navigation-bar").fadeIn();
  } else {
    $("#pn-navigation-bar").fadeOut();
  }
});

但是，每当页面最初加载时，导航栏仍然会显示，但在用户滚动一点后就会消失。 this 中对此进行了演示。此处的视频和下面的图片:

但是JS代码指定在滚动一定量之前不显示div。我可以做什么来解决这个问题？

Answer 1

逻辑没有指定“在滚动一定量之前不显示 div”，而是指定了更像“当页面滚动时，隐藏div 如果尚未滚动一定量。”因此，您还需要在页面加载后但发生任何滚动之前指定导航栏的初始可见性。

只需在 #pn-navigation-bar 上设置 style="display:none;" 即可将其隐藏起来。

如果您不想更改 css，请在文档中准备好

或 $("#pn-navigation-bar").hide() 。