滾動時更改div的背景顏色

Question

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的元素和一個比自身大的子元素）。

綁定到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/

Answer 2

這是一個例子

 $( window ).ready(function() { var wHeight = $(window).height(); $('.slide') .height(wHeight) .scrollie({ scrollOffset : -50, scrollingInView : function(elem) { var bgColor = elem.data('background'); $('body').css('background-color', bgColor); } }); }); 

 body { transition: background 1s ease; background: #3498db; } p { color: #ecf0f1; font-size: 2em; text-align: center; } span { clear: both; font-size: 0.7em; color: #bdc3c7; } .slide .inside { display: table; height: 100%; width: 100%; padding: 0 3em; } .slide .inside p { display: table-cell; width: 100%; clear: both; vertical-align: middle; text-align: center; } 

 <div class="main-wrapper"> <div class="slide slide-one" data-background="#3498db"> <div class="inside"> <p>Statement 1</p> </div> </div> <div class="slide slide-two" data-background="#27ae60"> <div class="inside"> <p>Statement 2</p> </div> </div> <div class="slide slide-three" data-background="#e74c3c"> <div class="inside"> <p>Statement 3</p> </div> </div> <div class="slide slide-four" data-background="#e67e22"> <div class="inside"> <p>Statment 4</p> </div> </div> <div class="slide slide-five" data-background="#9b59b6"> <div class="inside"> <p>Have an awesome day</p> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js"></script>