增加滚动时显示导航栏，减少滚动时隐藏导航栏答案

【问题标题】：Show Navbar when increase scroll, hide Navbar when decrease scroll增加滚动时显示导航栏，减少滚动时隐藏导航栏
【发布时间】：2021-02-07 12:24:04
【问题描述】：

目前我想在我滚动网页时显示我的导航栏，并在我向后滚动时隐藏我的导航栏。我在谷歌上到处搜索，我找不到可以帮助我的东西。我很惊讶这还没有出现在网络上。也许我搜索得不够好，但是，经过几个小时的挫折，我决定在这里寻求专业人士的帮助。 ;-)

不胜感激！

<body>
<nav>
     <ul>
          <li><a href="#">Help</a></li>
     </ul>
</nav>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"</script>
</body>

nav{
    position: fixed;
    padding: 30px 70px;
    width: 100vw;
    height: 10vh;
    background: black;
    transition: .5s ease;
    z-index: 5;
}

nav ul{
    float: right;
    margin-right: 100px;
    padding: 0px 40px;
}

$(window).scroll(function () {

    var scroll = $(window).scrollTop();
    var p = $win.scrollTop() / max;
    var x = window.matchMedia("(max-width: 800px)")

    console.log(scroll);
        if (scroll > 0) {
            $('nav').css({
                "top": "0%",
            });
        } else {
            $('nav').css({
                "top": "-25%",
            });
        };
});

【问题讨论】：

标签： javascript html jquery css scroll

【解决方案1】：

我认为你的意思是 https://www.w3schools.com/howto/howto_js_navbar_slide.asp

或者是这样的：

let lastScrollTop = 0;
function scrollFunction() {
  scroll = document.body.scrollTop || document.documentElement.scrollTop;
  if (scroll > lastScrollTop) // Scrolling Down
    document.getElementById("navbar").style.top = "0";
  else // Scrolling Up
    document.getElementById("navbar").style.top = "-50px";
  lastScrollTop = scroll;
}

window.onscroll = function() {scrollFunction()};

let lastScrollTop = 0;
function scrollFunction() {
  scroll = document.body.scrollTop || document.documentElement.scrollTop;
  if (scroll > lastScrollTop) // Scrolling Down
    document.getElementById("navbar").style.top = "0";
  else // Scrolling Up
    document.getElementById("navbar").style.top = "-50px";
  lastScrollTop = scroll;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div style="padding:15px 15px 2500px;font-size:30px">
  <p><b>This example demonstrates how to slide down a navbar when the user starts to scroll the page.</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll to the top to hide the navbar.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>
</html>

而且已经有人在 jQuery 中做到了 How can I determine the direction of a jQuery scroll event?

【讨论】：

不，当我向后滚动时（滚动变量的数量正在减少），我想隐藏导航栏。
这是我为你做的。
感谢您的努力，但它仍然只在我位于页面顶部时隐藏。当我在页面中间向后滚动时，它保持可见。
不，我在 w3schools 编辑器上测试了它，复制并粘贴该功能，它肯定会工作
很高兴知道这一点