时间戳

首页 > 解决方案 > 想要在使用 js 或 jquery 向下/向上滚动时隐藏/显示导航栏

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

问题描述

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

我的导航栏 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;
}

标签： javascriptjqueryhtmlcss

解决方案

您的解决方案中的第一个问题是您有一个类 ( <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

推荐阅读