Jquery html/css:在固定的pos标题上创建投影,在滚动时出现并消失

Question

这里是jquery的新手,但我正在尝试学习一些我经常在网站上做过的不同的东西.

我无法弄清楚的一个这样的情况是如何为固定定位的标题创建一个投影,这样当你滚动时,标题下会出现一个投影,然后当你不滚动任何东西时就会消失.这是我经常使用这种技术的网站 www.thisisluckyme.com

它似乎并不太复杂,但在尝试制作时我找不到太多东西.任何帮助或洞察如何非常感谢它的下降!

Answer 1

很简单.您只需将事件处理程序绑定到窗口的滚动事件,并检查固定标头顶部的位置.如果不是0,则添加阴影.如果为0,则删除0.

工作示例:http://jsfiddle.net/3cRe5/

JS:

var header = $('.header');

$(window).scroll(function(e){
    if(header.offset().top !== 0){
        if(!header.hasClass('shadow')){
            header.addClass('shadow');
        }
    }else{
        header.removeClass('shadow');
    }
});