Jquery html/css:在滚动时显示和消失的固定标题上创建下拉阴影

Jquery html/css: Creating drop shadow on fixed pos header that appears and disappears when scrollling

本文关键字：标题 创建 阴影 消失 css html 显示 滚动 Jquery      更新时间：2023-09-26

这里是jquery新手，但我正在尝试学习一些我经常访问的网站上的不同内容。

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

它看起来不太复杂，但当我试图做这个时，我找不到太多的东西。任何帮助或洞察如何下来将非常感激!

非常简单。您只需将事件处理程序绑定到窗口的滚动事件，并检查固定标题顶部的位置。如果不为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');
    }
});
相关文章：