粘性标题的框阴影应仅在滚动时激活[重复]

Question

我有一个粘性标题，下面有一个框阴影。我希望只有当用户向下滚动时才会出现框阴影。此外，一旦用户滚动回页面顶部，阴影也会消失。

我在这个jsfiddle看到了类似的解决方案：

var header = $('.header');

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

css:

.header {
    font-size:24px; 
    width:100%;
    height:60px; 
    background:white; 
    position:fixed
}

.header.shadow {
    box-shadow:0px 5px 5px rgba(0,0,0,.5);
}

body {
    height:1000px; 
    background: rgb(169,3,41); 

    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); 

    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); 

    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 

    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 
    
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 

    /* IE10+ */
    background: linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); 

    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

然后在这里实现：http://www.provisiontree.co.in/

有谁知道如何让盒子阴影出现在示例网站中的淡入效果中？

Answer 1

你需要捕捉窗口的scroll事件。

您可以在此处查看使用 jQuery 的小提琴：http://jsfiddle.net/DQv33/

窗口的scrollTop 属性会显示你是否在顶部($(window).scrollTop() == 0)，所以这是设置/取消设置标题的框阴影的条件。