替代“onScroll”来隐藏导航栏？答案

【问题标题】：alternative to "onScroll" for hiding navbar?替代“onScroll”来隐藏导航栏？
【发布时间】：2020-04-26 08:35:31
【问题描述】：

作为脚本新手，我恳请有关此问题的帮助：我希望在我的主页加载时隐藏我的导航栏（#header-menu）。向下滚动一点（500px）后，我希望它被显示出来。该脚本有效，除了导航栏在到达主页时显示。向下滚动时它会消失，然后再次出现。但问题是在到达主页时（例如点击徽标时）默认情况下它不会隐藏。

<header>
    <div id="header-content">
        <a href="index.php#toppage"><img src="images/Logo.png" alt="" style="float:left"></a>
        <a href="index.php#toppage"><img src="images/Logo2.png" alt="" style="float:right"></a>
    </div>

    <ul id="header-menu" class="grid-4">
        <li><a href="#menu-item-1" class="page-scroll menu-item-blue">menu-item-1</a></li>
        <li><a href="#menu-item-2" class="page-scroll menu-item-blue">menu-item-2</a></li>
        <li><a href="#menu-item-3" class="page-scroll menu-item-blue">menu-item-3</a></li>
        <li><a href="#menu-item-4" class="page-scroll menu-item-blue">menu-item-4</a></li>
</ul>
</header>

<script>
window.onscroll = function() {hidemenu()};
function hidemenu() {
var element = document.getElementById("header-menu");
  if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
    element.classList.remove("hidden");
  } else {
    element.classList.add("hidden");
  }
}
</script>

我想实际上我正在寻找“onscroll”的替代方法。我不想在用户滚动时触发导航栏的隐藏/显示，我希望它根据位置隐藏/显示。此外，当用户在其他页面上时，应该显示导航栏。此隐藏/显示仅适用于主页。提前谢谢你。

【问题讨论】：

标签： javascript navbar hide show

【解决方案1】：

<script>
    var element = document.getElementById("header-menu");
    window.addEventListener("load",()=>{
        element.classList.add("hidden");
    })
    window.onscroll = function() {hidemenu()};
    function hidemenu() {
      if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
        element.classList.remove("hidden");
      } else {
        element.classList.add("hidden");
      }
    }
</script>

这是页面加载时隐藏的方法（或者）如果您想隐藏在主页中并在其他页面中可见，您可以使用

<body onload="hide-nav()">
....
</body> 

 <script>
var element = document.getElementById("header-menu");
        hide-nav=()=>{
        element.classList.add("hidden");
   }
        window.onscroll = function() {hidemenu()};
        function hidemenu() {
          if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
            element.classList.remove("hidden");
          } else {
            element.classList.add("hidden");
          }
        }
    </script>

【讨论】：

感谢您的帮助@ikmo！第一个有效..当我到达主页（顶部）时，导航栏被隐藏了。但是，主页分为多个部分，这些部分导致子页面。而且我在这里仍然遇到一些问题：1）当我在子页面上并且我转到主页顶部时。（所以当点击带有的标志时，导航栏在一微秒内可见。然后它会消失。这看起来有点草率......
2) 另外，当我在子页面上并返回主页时，我会到达主页的相应部分（而不是主页的顶部）。在这种情况下，导航栏在滚动之前不可见，这不是我想要的......事实上，我正在寻找的解决方案是：我希望导航栏一直可见，除非距离顶部不到 500px的主页。
如果您对滚动不满意，请尝试在 java-script 中使用 offset 我认为它会很有用