滚动时更改div的背景颜色

Question

http://jsfiddle.net/ncuydr9y/

页面初始的背景色应该是 #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');
            }
        });
    });

- user2252219

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 Version: http://jsfiddle.net/ncuydr9y/1/

- Maximillian Laumeister

---

啊，我明白了。谢谢你。我怎样才能让面板在页面加载时变成红色呢？现在它只是默认的白色。 - user2252219

你可以通过CSS将其设置为红色，例如：#left-panel{background-color: red}（推荐），或者在JavaScript中最初设置它，通过在document.ready函数的顶部复制以下行：$("#left-panel").css('background-color', 'red');。 - Maximillian Laumeister

如果我添加一个过渡效果，它会闪烁。 - user2252219

@user2252219 你说的“添加转换”是什么意思？ - Maximillian Laumeister

啊，算了。这是因为我在它上面有一个可见性切换。 :) - user2252219