向下滚动时隐藏header,向上显示

原文链接:https://segmentfault.com/q/1010000007252642/a-1020000007253263

//设置下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();
});

你可能感兴趣的:(向下滚动时隐藏header,向上显示)