首先出现的导航栏

Question

我是编码的新手（也是英文版），我的网站上有问题。 在加载时，导航栏会首先快速显示，我不想要它。 我希望它只在我滚动时出现。

这是我的网站：gaelhillion.com

你能帮我解决一下吗？

Answer 1

你必须指的是当窗户狭窄时，因为在大屏幕上它的行为就像你想要的那样。

我正在给你一个只有JS的答案，因为如果用户正在浏览JavaScript，你希望你的菜单出现。所以我没有在CSS中设置display：none。

我测试了这个，它的工作方式就像你想要的一样！但是，您可能希望在针对window.matchMedia的检查中进一步包装topNav.css调用，因此它仅适用于您指定的断点。

这个脚本依赖于jQuery，所以在加载jQuery之后加入它。

JavaScript的：

;(function ($) {
  $(function () {
    var topNav = $("#top-nav-panel").css("display", "none")

    $(window).scroll(function () {
      topNav.css("display", window.scrollY ? "block" : "none")
    })
  })
})(jQuery)

如果某些触摸屏设备上的行为不符合预期，您可能需要侦听“滚动”以外的事件。 Here's a blog post about how to get things working just right.

Answer 2

可以通过向display:none添加style.css来修复导航栏的快速显示：

section#top-nav {
    display : none;
}