jquery更改背景颜色用户滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery更改背景颜色用户滚动相关的知识，希望对你有一定的参考价值。
使用jquery是否可以当用户向下滚动页面时背景的动画从50％白色变为90％白色或某些？
首先它是颜色rgba(255,255,255,.5)，当用户滚动210px颜色become rgba(255,255,255,.9)。
答案
在这里你去（当你滚动超过210px时，这会将页面颜色更改为蓝色，如果你返回，它将恢复为红色）：
$(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');
}
});
});
另一答案
更新，更通用的版本：
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(',') +')');
});
});
如果你想在滚动时进行平滑，渐变的变化，你应该尝试
$(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 + ')');
});
});
另一答案
对于平滑过渡效果，您应该检查滚动位置，因此您可以更改bg颜色。使用jquery的.animate函数。
I found the perfect what I was looking for here
http://jsfiddle.net/cgspicer/V4qh9/
另一答案
在@ redmoon7777的帮助下
css
body{ height:5000px; }
.fifty { background:rgba(25,20,25,.5) }
.ninty { background:rgba(25,20,25,.9) }
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');
}
});
});
另一答案
随着动画
<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>
另一答案
这是一个改编自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";
}
}
这会改变一个特定的ID，对我来说是我的导航栏。为了便于转换，请将此添加到您的css，在这种情况下在navigationBar“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;
}
这将为您提供一个在420像素后逐渐改变颜色的条形图。
以上是关于jquery更改背景颜色用户滚动的主要内容，如果未能解决你的问题，请参考以下文章