Question

我有这个html和css代码：

<div class="header">

</div>

.header {
    top:0;
    left:0;
    right:0;
    width:100%;
    background:#3b5998;
    height:95px;
    margin-bottom: 50px;
position:fixed;
}

我在这里尝试做的是每当用户向下滚动时标题应位于固定位置（顶部）。对于那件事我没有任何疑问。我轻松完成了这项任务。

当用户向下滚动时，我想在其上添加不同的样式。我想在用户向下滚动时为其添加一个框阴影效果，使其看起来更高。如果用户向上滚动并到达我的网页的顶部，它将恢复为默认的css样式（没有框阴影）。

更喜欢说：

向下滚动=激活框阴影效果

如果向上滚动并到达顶部=还原

我不知道有任何css代码，也许有人会帮助我使用他们的javascript / jquery专业知识来制作代码？

抱歉，如果我的解释太长或有点混乱。非常感谢你！

Answer 1

试试这个

$(window).scroll(function(){
if (document.body.scrollTop === 0)
     $(".header").css({"box-shadow":"none"});
else
     $(".header").css({"box-shadow":"0px 0px 1px #EEE"});
});

See Demo For Reference only

Answer 2

这样的东西？

var win = $(window),
    doc = $(document),
    header = $('.header');

win.scroll(function(e) {
    var scrollPercent = win.scrollTop() / (doc.height() - win.height()),
        scrollPercentRounded = (scrollPercent * 100).toFixed(2);

    header.css({boxShadow: '0 0 ' + scrollPercentRounded + 'px #000'});
});

<强> demo

Answer 3

使用this code，您可以顺利过渡：

var $doc = $(document),
    $target = $('.header'),
    limit = 200,
    shadowStyle = '0 2px 5px',
    rgb = '0,0,0';

$(window).scroll(function() {
    var top = $doc.scrollTop();

    if (top <= limit) {
        var opac = 1/limit*top;
        $target.css('box-shadow', shadowStyle+' rgba('+rgb+','+opac+')');
    }
});

您可以轻松修改阴影样式，limit可以定义淡入/淡出的范围。

滚动时添加文本阴影（jquery或javascript）

3 个答案: