如何实现类似简书/知乎专栏那样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();
});