时间戳

首页 > 解决方案 > 增加滚动时显示导航栏，减少滚动时隐藏导航栏

javascript - 增加滚动时显示导航栏，减少滚动时隐藏导航栏

问题描述

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

将不胜感激任何帮助！

<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%",
            });
        };
});

标签： javascripthtmljquerycssscroll

解决方案

我想你的意思是这样的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 中做到了 我如何确定 jQuery 滚动事件的方向？

推荐阅读