js实现页面滚动显示和隐藏顶端固定导航

可以使用CSS属性`position: fixed`和JavaScript来实现页面滚动时顶端固定导航的显示和隐藏。

首先，在CSS中设置导航栏的基本样式，并将其设置为`position: fixed`和`top: 0`，使其固定在页面顶部。然后，使用JavaScript来监听页面滚动事件，并且通过判断页面滚动距离来控制导航栏的显示和隐藏。

具体实现代码如下：

HTML部分：

<nav class="navbar">
  <!-- 导航栏内容 -->
</nav>

CSS部分：

.navbar {
  position: fixed;
  top: 0;
  /* 其他样式 */
}

JavaScript部分：

var navbar = document.querySelector(".navbar");
var lastScrollTop = 0;

window.addEventListener("scroll", function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > lastScrollTop) {
    // 向下滚动
    navbar.classList.add("hide");
  } else {
    // 向上滚动
    navbar.classList.remove("hide");
  }
  lastScrollTop = scrollTop;
});

在上面的代码中，我们首先获取到导航栏的DOM元素，并且记录下上一次滚动时的距离（`lastScrollTop`）。然后，监听`scroll`事件，并且在事件处理函数中获取当前页面的滚动距离（`scrollTop`），通过与上一次滚动距离的大小比较，来判断用户是向上滚动还是向下滚动。如果是向下滚动，则给导航栏添加`hide`类，隐藏导航栏；如果是向上滚动，则移除`hide`类，显示导航栏。

最后，在CSS中定义`.hide`类来实现导航栏的隐藏效果，例如：

.navbar.hide {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

上面的代码中，我们使用`transform`属性来将导航栏向上移动`100%`的高度，实现隐藏效果。并且使用`transition`属性来添加过渡效果，让隐藏和显示更加平滑。