单击其中的锚链接时，如何使导航栏停止消失？为什么要这样做？

Question

我这里有点 UI 问题。我有一个导航栏，它在向上滚动或向下滚动时淡入淡出。问题是，当您单击导航中的链接时，当单击彼此右侧的文本时，导航栏会完全消失。我试过删除事件侦听器、嵌套事件侦听器并从嵌套的事件侦听器中删除、使事件成为一个单独的函数并将其取消、使滚动事件为真和 false/null，等等，但都无济于事。

如何让导航栏在点击事件时保持不变而不消失？任何正确方向的答案、建议、改进或一些提示都将不胜感激，现在已经坚持了很长一段时间。

代码：

<html>
  <link rel="stylesheet" href="portfolio.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      font: 24px 'Roboto', sans-serif;
      background: url("images/someTree.jpg") no-repeat;
      background-size: cover;
    }

    header {
      opacity: 0.9;
      width: 100%;
      height: 85px;
      position: fixed;
      z-index: 1000;
      background-color: #96C339;
    }

    header h1#logo {
      float: left;
      font-family: "Roboto", sans-serif;
      font-size: 40px;
      color: #FFF;
      font-weight: 400;
      margin-left: 35px;
    }

    header nav {
      display: inline-block;
      float: right;
    }

    header nav a {
      line-height: 100px;
      margin-left: 20px;
      margin-right: 20px;
      color: #FFF;
      font-weight: 700;
      font-size: 20px;
      text-decoration: none;
    }

    a {
      font-family: 'Droid Sans', serif;
      color: white;
      text-decoration: none;
      line-height: 40px;
    }

    .active {
      font-family: 'Droid Sans', serif;
      font-size: 22px;
      color: #000;
      text-decoration: none;
      line-height: 40px;
    }

    #about {
      background-color: #fff;
      height: 100vh;
      width: 100vw;
      opacity: 0.6;
    }

    #skills {
      background-color: #fff;
      height: 100vh;
      width: 100vw;
      opacity: 0.6;
    }

    #contact {
      background-color: #fff;
      height: 100vh;
      width: 100vw;
      opacity: 0.6;
    }

    @media all and (max-width: 770px) {
      header h1#logo {
        font-size: 30px;
        display: block;
        float: none;
        margin: 0 auto;
        height: 100px;
        line-height: 55px;
        text-align: center;
      }

      header nav {
        display: block;
        float: none;
        height: 50px;
        text-align: center;
        margin: 0 auto;
        margin-top: -65px;
      }

      header nav a {
        font-size: 15px;
        line-height: 50px;
        margin: 0 5px;
      }
    }
  </style>
<body>
  <div class="wrapper">
    <header class="nav">
      <h1 id="logo">DMac</h1>
      <nav>
        <a href="#about" class="active">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <div id="about" class="section"></div>
    <div id="skills" class="section"></div>
    <div id="contact" class="section"></div>
    <script> (function () {
      
        // Where Navigation text links to
        const section = document.querySelectorAll(".section");
        // Navigation bar wrapper
        const nav = document.querySelector(".nav");
        // Navigation anchor text
        const anchors = document.querySelectorAll(".visible");
      
        // Set
        const sections = {};
      
        'use strict';
        // Initial scroll state
        let scrollPos = 0;
        // Scroll event
        let scrolling = false;
        document.addEventListener('scroll', scrollEvent)
        // Detects scroll state and compares it with the new one to fade in/fade out.
        function scrollEvent() {
          scrolling = true;
          if ((document.body.getBoundingClientRect()).top > scrollPos) {
            nav.style.transition = "all 1.0s";
            nav.style.opacity = 1;
            nav.style.visibility = "visible"
          } else {
            nav.style.transition = "all 1.0s";
            nav.style.opacity = 0;
            nav.style.visibility = "hidden";
          }
          scrollPos = (document.body.getBoundingClientRect()).top;
      
      
          // Turn each dom anchor into and array and iterate through each (by id)
          const arr = Array.from(section)
          arr.forEach(function (el) {
            sections[el.id] = el.offsetTop;
          });
      
          const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
          Object.keys(sections).forEach((el) => {
            if (sections[el] <= scrollPosition) {
              document.querySelector('.active').setAttribute('class', ' ');
              document.querySelector('a[href*=' + el + ']').setAttribute('class', 'active');
            }
          })
        }
      
        // Keep the scroll function from constantly firing. 
        setInterval(function () {
          if (scrolling) {
            scrolling = false;
          }
        }, 250);
      
        // Start scroll event
        scrollEvent();
      
      }());
      </script>
  </div>
</body>

</html>

Answer 1

因此，当您滚动时，以下代码会隐藏滚动条。单击导航 link 也会滚动到页面上的某些部分。到达该部分后，您应该使滚动条再次可见。

         if ((document.body.getBoundingClientRect()).top > scrollPos) {
            nav.style.transition = "all 1.0s";
            nav.style.opacity = 1;
            nav.style.visibility = "visible"
          } else {
            nav.style.transition = "all 1.0s";
            nav.style.opacity = 0;
            nav.style.visibility = "hidden";
          }

我将以下内容更新到您的代码中并且它起作用了。

       setInterval(function () {
          if (scrolling) {
            scrolling = false;
            nav.style.transition = "all 1.0s";
            nav.style.opacity = 1;
            nav.style.visibility = "visible"
          }
        }, 250);

单击其中的锚链接时，如何使导航栏停止消失？为什么要这样做？

How do I make the navigation bar stop disappearing when clicking on anchor links within? Why is it doing that?

javascript

user-interface

navigationbar

dom-events