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 + ')'); }); });
的jsfiddle
要获得平滑过渡效果，您应该检查滚动位置，因此您可以更改bg颜色。 使用jquery的.animate函数。
I found the perfect what I was looking for here
在@ 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'); } }); });
DEMO
随着动画