Question

我在网页上有5个框，你可以在这里看到：

http://demo.axistheme.com/methodology/Wakeup-Method.html

第一个方框的文字01为黄色背景色，第二个方框的文字为02,03等，背景为灰色。

滚动窗口时，如何在窗口顶部下方200px处更改其他每个框的背景颜色（逐个）？

Answer 1

您需要检查 - 滚动窗口时 - 如果任何元素距视口顶部小于200px。

要确定每个元素相对于视口的垂直偏移位置，您可以从每个元素相对于文档（$(window).scrollTop）的垂直偏移位置中减去窗口垂直滚动位置（.offset().top）。

ie。 var offsetTopPosition = $(ELEMENT).offset().top - $(window).scrollTop();

工作示例：

$(document).ready(function(){

    $(window).scroll(function(){

        $('div').each(function(){

        	var offsetTopPosition = $(this).offset().top - $(window).scrollTop();

        	if (offsetTopPosition < 100) {
                $(this).addClass('active');
        	}

        	if (offsetTopPosition > 100) {
                $(this).removeClass('active');
        	}

        });

    });

});

div {
width: 36px;
height: 36px;
line-height: 36px;
margin-bottom: 200px;
color: rgb(0,0,0);
background-color: rgb(191,191,191);
font-size: 24px;
font-weight: bold;
text-align: center;
}

.active {
background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

Answer 2

您可以将offset（）与$（window）.scrollTop（）结合使用来确定元素的位置。

    $('.box').each(function( index ) {
        var threshold = 200;
        var topOffset = $( this ).offset().top;
        if( topOffset - $(window).scrollTop() < threshold){
            $( this ).addClass('active');
       }else{
           $( this ).removeClass('active');
        }
    });

请参阅此处的工作示例： https://jsfiddle.net/jkrielaars/yt584kLz/2/

如何使用jquery从窗口顶部达到200px时更改div的类？

2 个答案: