javascript - 想在使用 js 或 jquery 向下/向上滚动时隐藏/显示导航栏

Question

我只是想在向下滚动时隐藏导航栏并在向上滚动时显示导航栏，所以我添加了我所做的但我无法实现它，在此先感谢:)

我的导航栏 html 代码

<div class="nav-scroll">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
            </button>
             <img src="/cmm/images/codemymobile-logo-light.svg">
          </div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#myPage">PORTFOLIO</a></li>
              <li><a href="#band">OUR EXPERTISE</a></li>
              <li><a href="#tour">PROCESS</a></li>
              <li><a href="#contact">SERVICE</a></li>
              <li><a href="#contact">CASE STUDIES</a></li>
              <li class="qoute-btn"><a href="#contact">GET A QUOTE</a></li>


            </ul>
          </div>
        </div>
      </nav>
    </div>

我的js如下

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("nav-scroll").style.top = "0";
  } else {
    document.getElementById("nav-scroll").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

Answer 1

解决方案中的第一个问题是您有一个类 ( <div class="nav-scroll"> )，但您使用的是 document.getElementById() .您应该在 HTML () 中使用 id 或使用 document.getElementsByClassName()[0]在你的 JavaScript 中。

您的问题带有 jquery 标记，但您的代码使用纯 JavaScript。您可以在下面看到您的代码版本，其中进行了细微更改以帮助您取得进步:

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;

  // 20 is an arbitrary number here, just to make you think if you need the prevScrollpos variable:
  if (currentScrollPos > 20) {
    // I am using 'display' instead of 'top':
    document.getElementById("nav-scroll").style.display = "none";
  } else {
    document.getElementById("nav-scroll").style.display = "initial";
  }
}

尝试一下您自己的解决方案后，您可以尝试转向 jQuery。这是一个有用的链接:

https://codepen.io/JTParrett/pen/fnCKE