添加文字阴影（jQuery的或JavaScript）

我有这样的HTML和CSS代码：添加文字阴影（jQuery的或JavaScript）

<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的专业知识，使一个代码？

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

来源

2013-02-07 Kareen Lagasca

使用$（window）.scroll（function（）{Your code}）; – Dineshkani

您是否想要根据稳定定义的距离或当前的滚动条更改阴影？ – yckart

有一个明确的例子，你可以看看这个网站：http：//www.bendaggers.com/他的头部固定在顶部。我试图在这里完成的是相同的，但是我想在用户向下滚动页面时在页眉底部有一个黑盒子阴影。还要注意的是，如果用户上升并到达顶部，则边框的黑框阴影将消失。 –

尝试这样

$(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

来源

2013-02-07 15:44:36 Dineshkani

为什么-1请说明理由？ – Dineshkani

$（窗口）.scroll（函数（）{ 如果（===的document.body.scrollTop 0）的box-shadow：无; 其他的box-shadow：0像素0像素1px的#EEE; }）; 是对的吗？ –

@KareenLagasca它根据您的要求。查看更新回答 – Dineshkani

像这样的事情？

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

来源

2013-02-07 15:53:34 yckart

会尝试你的代码，我的办公室电脑真的很糟糕。 IT部门只安装了IE8，所以箱子阴影效果不可见。但我希望你的代码能够工作。一直在这一部分停留一天。顺便说一句，jsfiddle不工作，因为IT部门阻止它。我不知道为什么，也许是因为他们让我的工作人员在线玩js游戏。大声笑感谢你的方式，我会在今天晚些时候回复你。非常感谢你！ :) –

@KareenLagasca我会很感激你的反馈:-) – yckart

谢谢你，祝你有美好的一天！ :) –

-2

随着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定义在哪个范围应该淡入/淡出。

来源

2013-02-07 16:07:03 Simon

感谢simon的帮助:) –

添加文字阴影（jQuery的或JavaScript）

回答

相关问题