Question

当前，我想在滚动网页时显示导航栏，而在向后滚动时隐藏导航栏。我在Google上搜索了所有内容，但找不到任何可以帮助我的东西。令我惊讶的是它还没有出现在网络上。也许我的搜索不够好，但是，经过数小时的挫败，我决定从这里的专业人士那里获得一些帮助。 ;-）

非常感谢您的帮助！

this.router.navigate

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

Answer 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?

增大滚动条时显示导航栏，减小滚动条时隐藏导航栏

1 个答案: