Javascript Jquery html/css:在固定pos头上创建下拉阴影,滚动时显示和消失

Javascript Jquery html/css:在固定pos头上创建下拉阴影,滚动时显示和消失,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这里是jquery新手,但我正在尝试学习一些在我经常访问的网站上做过的不同的东西 其中一个我无法理解的情况是,如何为固定位置的标题创建放置阴影,这样当您滚动标题时,放置阴影会出现在标题下,当您不滚动任何内容时,放置阴影就会消失。下面是我经常访问的网站,它使用了这种技术 这看起来不太复杂,但我在尝试做这件事的时候找不到太多的东西。任何帮助或洞察它是如何下降将不胜感激 非常简单。您只需将事件处理程序绑定到窗口的滚动事件,并检查固定标题顶部的位置。如果不是0,则添加阴影。如果为0,请删除0 工作示例:

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

其中一个我无法理解的情况是,如何为固定位置的标题创建放置阴影,这样当您滚动标题时,放置阴影会出现在标题下,当您不滚动任何内容时,放置阴影就会消失。下面是我经常访问的网站,它使用了这种技术


这看起来不太复杂,但我在尝试做这件事的时候找不到太多的东西。任何帮助或洞察它是如何下降将不胜感激

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

工作示例:

JS:

var header = $('.header');

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