0

我有这个 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专业知识帮助我制作代码？

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

4

3 回答 3

0

像这样试试 

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

见演示仅供参考

于 2013-02-07T15:44:36.597 回答
0

像这样的东西？

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'});
});

演示

于 2013-02-07T15:53:34.297 回答
-2

使用此代码，您可以获得一个很好的平滑过渡：

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定义它应该淡入/淡出的范围。

于 2013-02-07T16:07:03.730 回答