首先出现的导航栏

Question

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

这是我的网站：gaelhillion.com

你能帮我修一下吗？

Answer 1

你的意思肯定是 window 变窄了，因为在大屏幕上它会如你所愿。

我给你一个 JS-only 的答案是因为如果用户在 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)

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

Answer 2

导航栏快速显示可以通过在 style.css 中添加 display:none 来解决：

section#top-nav {
    display : none;
}

首先出现的导航栏

Navbar that appear first

javascript

scroll

navbar