jQuery jquery更改背景颜色用户滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8755887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery change background color user scroll
提问by Maanstraat
Is it possible with jquery that when a user scrolls down the page that the background animate from 50% white to 90% white or someting?
当用户向下滚动页面时，jquery 是否可能使背景从 50% 白色变为 90% 白色或其他动画？
So first it is the color rgba(255,255,255,.5)and when a user scroll 210px below the color become rgba(255,255,255,.9).
所以首先是颜色rgba(255,255,255,.5)，当用户滚动到颜色下方 210 像素时become rgba(255,255,255,.9)。
回答by Guy Cook
Updated, more generic version:
更新，更通用的版本：
var tStart = 100 // Start transition 100px from top
, tEnd = 500 // End at 500px
, cStart = [250, 195, 56] // Gold
, cEnd = [179, 217, 112] // Lime
, cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[2] - cStart[2]];
$(document).ready(function(){
$(document).scroll(function() {
var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
$("body").css('background-color', 'rgb(' + cBg.join(',') +')');
});
});
If you want a smooth, gradiated change when scrolling you should try
如果你想要滚动时平滑的渐变变化，你应该尝试
$(document).ready(function(){
$(document).scroll(function() {
var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop() / 210, 0.9);
var channel = Math.round(alpha * 255);
$("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')');
});
});
回答by redmoon7777
here you go (this will change the page color to blue when you scroll more than 210px, and will revert back to red if you go back up):
给你（当你滚动超过 210 像素时，这会将页面颜色更改为蓝色，如果你返回，它将恢复为红色）：
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("body").css('background-color', 'blue');
} else {
$("body").css('background-color', 'red');
}
});
});
回答by SSR
For smooth transition effect you should check scroll position, accordingly you can change bg-color. use .animatefunction of jquery.
为了平滑过渡效果，您应该检查滚动位置，因此您可以更改 bg-color。使用jquery 的.animate函数。
I found the perfect what I was looking for here
回答by diEcho
with help of @redmoon7777
在@redmoon7777 的帮助下
css
css
body{ height:5000px; }
.fifty { background:rgba(25,20,25,.5) }
.ninty { background:rgba(25,20,25,.9) }
jQuery
jQuery
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("body").removeClass().addClass('ninty');
} else {
$("body").removeClass('ninty').addClass('fifty');
}
});
});
回答by LostInComputer
With animation
带动画
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!--for RGBA support. http://pioupioum.fr/sandbox/jquery-color/ -->
<script type="text/javascript" src="https://raw.github.com/piouPiouM/jquery-color/master/jquery.color.js"></script>
<!--the magic -->
<script type="text/javascript">
$(document).ready(function(){
$(document).scroll(function(){
if($(this).scrollTop() > 210)
$('#bk').animate({backgroundColor: 'rgba(255,255,255,.9)'}, 1000);
});
});
</script>
</head>
<body style="background: black">
<div id="bk" style="background-color: rgba(255,255,255,.5); height: 200%; min-height: 400px">
<!--change this element's background transparency instead of body so that you will see the effect -->
</div>
</body>
</html>
回答by Demetrios Papakostas
Here is an answer that is adapted from a W3 tutorial, the javascript.
这是改编自 W3 教程 javascript 的答案。
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 420 || document.documentElement.scrollTop > 420) {
document.getElementById("navigationBar").style.background = "#2E5894";
} else {
document.getElementById("navigationBar").style.background = "transparent";
}
}
This changes a specific id, for me my navigation bar. For easy transitions, add this to your css, under the navigationBar "id" in this case (alongside other specifications youd like).
这改变了一个特定的 id，对我来说是我的导航栏。为了便于转换，请将其添加到您的 css 中，在本例中的导航栏“id”下（以及您喜欢的其他规范）。
#navigationBar{
/*my header bar, no need to follow this*/
overflow: hidden;
color: white;*/
width:100%;
position: fixed;
-webkit-transition: all ease-out .5s;
-moz-transition: all ease-out .5s;
-o-transition: all ease-out .5s;
transition: all ease-out .5s;
}
This will give you a bar that changes color gradually after 420 pixels.
这将为您提供一个在 420 像素后逐渐改变颜色的条。
