如何实现类似简书/知乎专栏那样header元素鼠标向下滚动的时候隐藏，向上滚动的时候又显示回来？

Question

知乎专栏链接
简书链接

在两个网站中浏览文章的时候，顶上的header元素在鼠标向下滚动的时候都会消失，像上滚动的时候又回重新出现，请问利用jQuery或者JavaScript实现这样一个功能呢？

Answer 1

写了个简单的demo，以本页面为例。下面的代码，F12，复制到console后，运行，即可实现效果//设置下css，加个绿色的背景，明显$('.sf-header').css({&nbsp;&nbsp;&nbsp;&nbsp;background&nbsp;:&nbsp;'#CFC',&nbsp;&nbsp;&nbsp;&nbsp; width:&nbsp;'100%'});//$(document).scroll(&nbsp;function(){&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;me&nbsp;=&nbsp;arguments.callee;&nbsp;//匿名函数可以&nbsp;通过&nbsp;arguments.callee&nbsp;调用自己 &nbsp;&nbsp;&nbsp;&nbsp;me.doc&nbsp;=&nbsp;me.doc&nbsp;||&nbsp;$(document);&nbsp;//缓存&nbsp;$(document); &nbsp;&nbsp;&nbsp;&nbsp;me.head&nbsp;=&nbsp;me.head&nbsp;||&nbsp;$('.sf-header'); &nbsp;&nbsp;&nbsp;&nbsp;me.lastTop&nbsp;=&nbsp;me.lastTop&nbsp;||&nbsp;me.doc.scrollTop();&nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;me.doc.scrollTop()&nbsp;<&nbsp;20&nbsp;||&nbsp;&nbsp;me.doc.scrollTop()&nbsp;>&nbsp;me.lastTop&nbsp;){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//向下&nbsp;或再&nbsp;页面顶部，放在&nbsp;头部 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.head.css({&nbsp;position&nbsp;:&nbsp;'relative'&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}else&nbsp;if(&nbsp;me.doc.scrollTop()&nbsp;<&nbsp;me.lastTop&nbsp;&nbsp;){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//向上，悬浮 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;me.head.css({&nbsp;position&nbsp;:&nbsp;'fixed'&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;me.lastTop&nbsp;=&nbsp;me.doc.scrollTop(); });