javascript - 在顶部的元素框上滚动设置背景颜色

Question

我认为代码显示了我正在尝试做的事情。

html:

<div id="one" class="box"></div>
<div id="two" class="box"></div>
<div id="thr" class="box"></div>
<div id="fou" class="box"></div>
<div id="fiv" class="box"></div>
<div id="six" class="box"></div>

脚本:

$(document).ready(function(){
    $(window).scroll(function(){
        $('.box').each(functions(e){
            if($(this).offset().top <= 0) {
                $(this).css('background-color','green');
            }
        });
    });
});

CSS:

div {
    position:relative;
    width:100%;
    height:300px;
    background-color:orange;
    margin:10px;
}

fiddle :http://jsfiddle.net/VR4ca/

因此，当滚动顶部的框时，背景颜色应变为绿色，直到下一个框到达窗口顶部

请帮忙

它甚至不适用于第一个盒子 http://jsfiddle.net/VR4ca/2/

Answer 1

$(window).scroll(function(){
    var pixelScrolled = $(window).scrollTop();
    $( ".box" ).each(function( index ) {
    var currentHeight = $(this).height();
        if (pixelScrolled >= index * currentHeight)
            $(this).addClass('active');
        else
            $(this).removeClass('active');
    });
});

您可以使用 .outerHeight() 或 .outerHeight(true) 代替 .height() 来包含边框、填充和边距的大小。

参见 demo :