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');
}
});
});
答案 0 :(得分:3)
您需要使用div
将滚动事件绑定到id="left-panel"
,因为这是包含滚动条的元素(即具有overflow: auto
的元素和大于$ {1}的子元素本身)。
绑定到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/