在特定区域 div 上切换类

Question

当滚动到顶部时， blue -class 被添加到#div ，但当它回到底部时， blue -class 不会被删除。

小提琴链接： http : //jsfiddle.net/5d922roc

 $(window).scroll(function() { var scroll = $(window).scrollTop(); var os = $('#div1').offset().top; var ht = $('#div1').height(); if(scroll > os + ht){ $('#div2').addClass('blue'); } });

 body, html { height: 101%; margin: 0; } .div { margin: 20px; padding: 5px; height: 500px; border: solid 1px black; background-color: #ffffff; } .div.blue { background-color: #15158F; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="div1" class="div"> Div 1 </div> <div id="div2" class="div"> Div 2 </div> <div id="div3" class="div"> Div 3 </div>

Answer 1

继续Taplar和Hassan 的评论； 您的if语句需要一个else语句来完成“如果滚动到顶部，将blue添加到div2 。如果不在页面顶部，则删除blue ”的命令。

更新/修改 JS：

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var os = $('#div1').offset().top;
    var ht = $('#div1').height();
    if(scroll > os + ht){
        $('#div2').addClass('blue'); // at top = blue
    } else {
        $('#div2').removeClass('blue'); // not at top = no blue
    }
});