使用jquery滚动15%后更改div颜色 [英] change div color after scrolling 15% down with jquery
本文介绍了使用jquery滚动15%后更改div颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个jquery代码下面它使一个div滚动。但我也想把它的div颜色更改为#32200F当从顶部下降15%。当它从顶部小于15%时返回原来的barckground。
I have this jquery code below which makes a div scroll. But I would also like it to change the div color to #32200F when is down 15% from the top.THen return to the original barckground when it is less than 15% from the top.
<script type="text/javascript">
$().ready(function() {
var $scrollingDiv = $("#navbar");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "slow" );
});
});
</script>
这是我的原始背景的CSS代码。我可以让它成为一个类,
Here is the CSS code of my original background.I can make it a class to make it easier:
#navbar {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
background-color: rgba(50,32,15,0.5);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c32200F, endColorstr=#4f32200F);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c32200F, endColorstr=#4f32200F)";
}
推荐答案
Try:
$(document).ready(function () {
var $scrollingDiv = $("#navbar");
$(window).scroll(function () {
$scrollingDiv.stop()
.animate({
"marginTop": ($(window).scrollTop() + 0) + "px"
}, "slow");
$scrollingDiv.css("background-color", (($(window).scrollTop() / $(document).height()) > 0.15) ? "orange" : "");
});
});
这篇关于使用jquery滚动15%后更改div颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文