在滚动上更改div的背景颜色

http://jsfiddle.net/ncuydr9y/

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'); } }); }); 

Answer 1

你需要将你的滚动事件绑定到id="left-panel" div ，因为那是包含滚动条的元素（即具有overflow: auto的元素overflow: auto和比自身大的子元素）。

绑定到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; } 

  
 
CONTENT