BG 颜色在开始时应为#1A1A1A,然后在滚动 210 像素后更改。不确定我哪里出错了。
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("#left-panel").css('background-color', '#1A1A1A');
} else {
$("#left-panel").css('background-color', 'red');
}
});
});
最佳答案
您需要使用 id="left-panel"
将您的滚动事件绑定(bind)到您的 div
,因为这是具有滚动条的元素(即元素overflow: auto
和一个比自身大的子元素)。
绑定(bind)到 document
或 window
将不起作用,因为在这种情况下它们不是带有滚动条的元素。
工作现场演示:
$(document).ready(function () {
var scroll_pos = 0;
$("#left-panel").scroll(function () {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 210) {
$("#left-panel").css('background-color', '#1A1A1A');
} else {
$("#left-panel").css('background-color', 'red');
}
console.log(scroll_pos);
});
});
#left-panel {
position: fixed;
top: 0;
left: 0;
width: 80%;
height: 100%;
z-index: 2;
overflow:auto;
height:2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="left-panel">
<div style="height:5000px;">CONTENT</div>
</div>
JSFiddle 版本:http://jsfiddle.net/ncuydr9y/1/
关于javascript - 在滚动条上更改 div 的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32675604/