时间戳

首页 > 解决方案 > 滚动时隐藏导航栏（Semplice wordpress）

javascript - 滚动时隐藏导航栏（Semplice wordpress）

问题描述

我正在使用 wordpress 上的 semplice 主题来构建我的投资组合网站。在主题中，我可以添加 CSS 和 JS 编码。我想让我的导航栏在我向下滚动时消失并在我向上滚动时重新出现。

我找到了应该执行此操作的编码，但是，它不起作用，并且看起来不像 semplice 为其他功能建议的编码。不幸的是，semplice 不再有助于提供自定义编码。我整个下午都在寻找答案。有人对这个有经验么？非常欢迎所有建议！

提前致谢！托马斯

标签： javascriptcssscrollhidenavbar

解决方案

您可以将变量设置为窗口的当前scrollY，当用户滚动时，检查是scrollY增加还是减少（向下滚动或向上滚动）以隐藏或显示导航栏。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
body, html{
 height: 1000px;
}
</style>
</head>
<body>

<ul id="header">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>




<script>
var position = window.scrollY;
window.onscroll = function(){
   var scroll = this.scrollY;
  if(scroll>position){
    //scrolling down
    document.getElementById('header').style.display = "none";
  } else {
   //scrolling up
   document.getElementById('header').style.display = "";
  }
  position = scroll;
}

 </script>

</body>
</html>

推荐阅读