随着阅历的不断增加，我逐渐意识到用户体验的重要性。偶尔，当我在访问部分移动端网站时，我会发现，大部分开发者都会将导航条固定定位在浏览器窗口顶部，它不会自动消失，遮挡了我阅读的视线。于是我想，能不能开发一个可以自动隐藏的导航条给我的网站使用，于是，我的网站便有了聪明的导航条。
它会随着你手指的滑动，自动地显示和隐藏，轻轻的在你想看到它时走来，轻轻地在你阅读时离去，不带走一片云彩~。考虑到使用JQuery的动画去实现这一效果比较耗费浏览器性能，并且，用户的滑动不是瞬间性的，它会有一个物理意义上的‘惯性’滚动的过程，在这个过程中，页面实在逐渐变慢滚动的。就像你用手指去滑动页面，当你的手指离开屏幕时，页面会继续滚动一段距离，而不是生硬地停下。在这种情况下，如果继续使用jQuery的animate( )或者slideUp/Down( )方法，只要用户滚动了页面，就会不断重复执行DOM操作，这无疑浪费了巨大了性能，并且，也会遇到一些意想不到的问题。比如导航条发疯了，不断来回显示和隐藏。
所以，我选择了CSS动画＋原生JS改变类名实现聪明的导航条，当然，我们也可以使用Vue通过控制某个变量的值，去动态绑定class类，这样无疑更加便捷和高效。
首先，要实现页面向下滚动时隐藏，页面向上滚动时显示，你需要知道，什么时候是上什么时候是下。这里我直接附上JS代码：
/* 首先，定义页面顶部距离浏览器窗口顶部的原始距离 */
var originalY = window.scrollY;
/* 接着，监听页面滚动事件 */
window.onscroll = function(){
/* window.scrollY就是页面顶部距离浏览器窗口顶部的距离 */
var currentY = window.scrollY;
if(currentY > originalY && currentY !== 0){
console.log('页面向上滑（即你的手指向上滑）');
} else {
console.log('页面向下滑（即你的手指向下滑）');
}
originalY = currentY;
}执行以上代码后，你会发现，当你滑动页面时，控制台会输出你滑动的方向，那么，我们的第一步目的就达到了。我们能清楚地知道页面到底是向上滑还是向下滑。之所在判断条件里以加一句currentY !== 0是为了不让你在第一次进入页面时就看不到你聪明的导航条。
接着，我们需要实现页面滚动时，对导航条的CSS样式进行动态切换，代码如下：
/* 首先，定义页面顶部距离浏览器窗口顶部的原始距离 */
var originalY = window.scrollY;
/* 这里先缓存导航条的DOM节点，以便下一步操作 */
var navBox = document.querySelector('.nav');
/* 接着，监听页面滚动事件 */
window.onscroll = function(){
/* window.scrollY就是页面顶部距离浏览器窗口顶部的距离 */
/* navBox.classList.value 就是你选定的DOM元素的类名*/
var currentY = window.scrollY;
if(currentY > originalY && currentY !== 0){
/* console.log('页面向上滑（即你的手指向上滑）'); */
navBox.classList.value = 'nav hidden';
} else {
/* console.log('页面向下滑（即你的手指向下滑）'); */
navBox.classList.value = 'nav';
}
originalY = currentY;
}CSS：
* {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: deepskyblue;
transition: height .5s;
}
.hidden {
height: 0 !important;
}做完以上两步之后，你就会发现你的导航条会随着你手指的上下滑动而自动显示和隐藏了。
接下来，我们还可以做一点优化，比如，我想设置一个阈值，让窗口至少滚动多少之后，再触发显示上的改变，比如，我想让页面至少滚动60px后再触发导航条显示上的改变。那么你只需要在判断页面滑动方向的代码片段外再加上一个判断，当页面滑动超过60px的距离后，再判断页面是上滑还是下滑。
/* 首先，定义页面顶部距离浏览器窗口顶部的原始距离 */
var originalY = window.scrollY;
/* 这里先缓存导航条的DOM节点，以便下一步操作 */
var navBox = document.querySelector('.nav');
/* 接着，监听页面滚动事件 */
window.onscroll = function(){
/* window.scrollY就是页面顶部距离浏览器窗口顶部的距离 */
/* navBox.classList.value 就是你选定的DOM元素的类名*/
var currentY = window.scrollY;
if(currentY - originalY >=60 || currentY - originalY <= -60) {
if(currentY > originalY && currentY !== 0){
/* console.log('页面向上滑（即你的手指向上滑）'); */
navBox.classList.value = 'nav hidden';
} else {
/* console.log('页面向下滑（即你的手指向下滑）'); */
navBox.classList.value = 'nav';
}
originalY = currentY;
}
}具体还能怎么优化，请发挥你的想象力吧，现代魔法的能力再强大也是需要人脑去靠创造的！
附上全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>聪明的导航条</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: deepskyblue;
transition: height .5s;
}
.hidden {
height: 0 !important;
}
</style>
</head>
<body style="height: 2000px;">
<div class="nav"></div>
<script type="text/javascript">
/* 首先，定义页面顶部距离浏览器窗口顶部的原始距离 */
var originalY = window.scrollY;
/* 这里先缓存导航条的DOM节点，以便下一步操作 */
var navBox = document.querySelector('.nav');
/* 接着，监听页面滚动事件 */
window.onscroll = function(){
/* window.scrollY就是页面顶部距离浏览器窗口顶部的距离 */
/* navBox.classList.value 就是你选定的DOM元素的类名*/
var currentY = window.scrollY;
if(currentY - originalY >=60 || currentY - originalY <= -60) {
if(currentY > originalY && currentY !== 0){
/* console.log('页面向上滑（即你的手指向上滑）'); */
navBox.classList.value = 'nav hidden';
} else {
/* console.log('页面向下滑（即你的手指向下滑）'); */
navBox.classList.value = 'nav';
}
originalY = currentY;
}
}
</script>
</body>
</html>