msyz188怎样完成类似简书/知乎专栏那样header元素鼠标向下转动的时分隐蔽,向上转动的时分又表现返来?

知乎专栏链接
简书链接

在两个网站中阅读文章的时分,顶上的header元素在鼠标向下转动的时分都市消失,像上转动的时分又回重新呈现,讨教使用jQuery或许JavaScript完成如许一个服从呢?

写了个复杂的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;
};

判别向上转动还是向下转动
http://zccst.iteye.com/blog/2…

http://wicky.nillia.ms/headro…
这个叫 Headroom 的插件便是专门为这种场景效力的。

(看完/读完)这篇文章有何感想! msyz188的分享…

发表评论

姓名 *
电子邮件 *
站点