更改背景顏色

Question

http://jsfiddle.net/ncuydr9y/

BG顏色應該是＃1A1A1A上開始滾動，然後PX 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元素和子元素比自己大）。

禁止與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/