【无标题】

最新推荐文章于 2023-06-30 17:01:07 发布

原创最新推荐文章于 2023-06-30 17:01:07 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

该代码示例展示了如何使用HTML、CSS和JavaScript创建一个导航栏，其效果是：页面顶部时隐藏，向上滚动时出现，向下滚动时隐藏。通过调整CSS的`top`属性和利用JavaScript监听滚动事件来实现这一交互效果。

做一个导航栏，它需要的效果是top=0不出现，向下滚动页面不出来，向上滚动页面出现@TOC

做一个导航栏，它需要的效果是top=0不出现，向下滚动页面不出来，向上滚动页面出现

您好，以下是一个实现您所需效果的导航栏代码：

HTML部分：

<nav class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS部分：

.navbar {
  position: fixed;
  top: -50px; /* 导航栏初始状态，向上隐藏 */
  left: 0;
  right: 0;
  background-color: #333;
  height: 50px;
  z-index: 1000;
  transition: top 0.3s; /* 添加过渡效果 */
}

.navbar.active {
  top: 0; /* 向下滚动页面时出现 */
}

JavaScript部分：

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.querySelector(".navbar").classList.add("active");
  } else {
    document.querySelector(".navbar").classList.remove("active");
  }
  prevScrollpos = currentScrollPos;
}

该代码通过监听页面的滚动事件，判断当前滚动位置和上一个滚动位置的大小关系来判断页面滚动方向。当向上滚动时，添加类名active，导航栏向下出现；当向下滚动时，移除类名active，导航栏向上隐藏。同时，为了实现"top=0不出现"的效果，初始时设置导航栏初始状态为top: -50px，即向上隐藏。