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

Question

我的网站有一个内容导航栏，它应该仅在用户向下滚动页面 800 像素后显示。我正在使用此 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”。因此，您还需要指定导航栏的初始可见性，在页面加载后但在任何滚动发生之前。
刚设置style="display:none;"在您的 #pn-navigation-bar最初隐藏它。
或 $("#pn-navigation-bar").hide()如果您不想更改 css，请在您的文档中准备好。