Question

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

我发现应该这样做的编码，但是，它不起作用，看起来也不像semplice为其他功能建议的编码。不幸的是，Semplice将不再提供自定义编码。我整个下午都在寻找答案。有人对这个有经验么？所有建议都非常欢迎！

提前谢谢！托马斯

Answer 1

您可以将变量设置为窗口的当前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>

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

1 个答案: