想要在使用js或jquery向下/向上滚动时隐藏/显示导航栏 [英] want to hide/show navbar when scroll down/up using js or jquery

问题描述

我只是想在向下滚动时隐藏导航栏，而在向上滚动时显示导航栏，所以我要添加我已完成的操作，但是我无法实现，请先感谢:)

I simply want to hide navbar when scroll down and show when scroll up so i am adding what i have done but i am unable to acheive it, thanks in advance :)

我的导航栏html代码

my html code for navbar

<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;
}

推荐答案

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

The first issue in your solution is that you have a class (<div class="nav-scroll">), but you are using document.getElementById(). You should use an id in your HTML () or use document.getElementsByClassName()[0] in your JavaScript.

您的问题已用jquery标记，但是您的代码使用纯JavaScript.在下面，您可以看到经过细微更改的代码版本，以帮助您取得进步:

Your question is flagged with jquery, but your code uses pure JavaScript. Below you can see a version of your code with minor changes to help you to make progress:

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.这是一个有用的链接:

After playing a bit with your own solution, you could try to move to jQuery. Here is a link that can be helpful:

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

这篇关于想要在使用js或jquery向下/向上滚动时隐藏/显示导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！