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

Question

知乎专栏链接
简书链接

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

Answer 1

写了个简单的demo，以本页面为例。

下面的代码，F12，复制到console后，运行，即可实现效果

//设置下css，加个绿色的背景，明显
$('.sf-header').css({
    background : '#CFC',
    width: '100%'
});

//
$(document).scroll( function(){
    var me = arguments.callee; //匿名函数可以 通过 arguments.callee 调用自己
    me.doc = me.doc || $(document); //缓存 $(document);
    me.head = me.head || $('.sf-header');
    me.lastTop = me.lastTop || me.doc.scrollTop();
    if( me.doc.scrollTop() < 20 ||  me.doc.scrollTop() > me.lastTop ){
        //向下 或再 页面顶部，放在 头部
        me.head.css({ position : 'relative' });
    }else if( me.doc.scrollTop() < me.lastTop  ){
        //向上，悬浮
        me.head.css({ position : 'fixed' });
    }
    me.lastTop = me.doc.scrollTop();
});

Answer 2

判断向上滚动还是向下滚动
http://zccst.iteye.com/blog/2...

Answer 3

http://wicky.nillia.ms/headro...
这个叫 Headroom 的插件就是专门为这种场景服务的。