js和css3智能隐藏和显示的顶部导航菜单

这是一款使用js和css3制作的智能隐藏和显示的顶部导航菜单。该顶部导航菜单在页面向下滚动时可以帧动画隐藏，在向上滚动到一定距离时优惠显示出来。

使用方法

HTML结构

使用<header>元素作为该导航菜单的HTML结构：

<header class="header-navigation" id="header">
  <nav>
    <a class="link" href="#" title="Home">首页</a>
    <a class="link" href="#" title="About">关于我们</a>
    <a class="link" href="#" title="Contact">联系我们</a>
  </nav>
</header>              
                

CSS样式

为导航菜单添加样式，使它固定在页面的顶部：

.header-navigation {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #333;
  text-align: center;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}              
                

导航菜单的隐藏和显示需要两个预定义的class类：

/*导航菜单向上滑动*/
.slideUp {
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  transition: transform .5s ease-out;
}
/*导航菜单向下滑动*/
.slideDown {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: transform .5s ease-out;
}                
                

JavaScript

通过下面的JavaScript代码，在页面滚动到合适的位置时，隐藏或显示导航菜单。

var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("header");

window.addEventListener('scroll', function(e) {
  last_scroll_position = window.scrollY;

  // 向下滚动
  if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
    header.classList.remove("slideDown");
    header.classList.add("slideUp");

  // 向上滚动
  } else if (new_scroll_position > last_scroll_position) {
    header.classList.remove("slideUp");
    header.classList.add("slideDown");
  }

  new_scroll_position = last_scroll_position;
});