唔..家里断网了写点字打发打发时间( º﹃º )

如何制作一个顶部导航菜单？

先放个html

    <div id=“nav”>噼里啪啦</div>

再加一点点css

#nav {
   position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
}

结束了

...

貌似太草率了，那么再加点东西，在页面向下滚动时就消失，在向上滚动时显示出来。

首先要把向上滚和向下滚的css写出来，就像这样子

.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;
}    

于是再加个js

var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("nav");
 
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;
});   

于是就可以愉快地使用啦

话说用手机写真的好费劲哦இдஇ

本文参考htmleaf