Jquery 当用户滚动超过或低于特定div时更改css

Jquery 当用户滚动超过或低于特定div时更改css,jquery,css,scroll,vertical-scrolling,Jquery,Css,Scroll,Vertical Scrolling,看这里: 假设我想在有人滚动到div1之前或之下时更改主体的背景色,如果可以的话,我将如何使用jquery进行更改 我知道这是: $(window).scroll(function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 100; if(y_scroll_pos > scroll_pos_test) { $("body").css("background-color","black"); }

看这里:

假设我想在有人滚动到div1之前或之下时更改主体的背景色,如果可以的话,我将如何使用jquery进行更改

我知道这是:

$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 100;

if(y_scroll_pos > scroll_pos_test) {
   $("body").css("background-color","black");
}
else
{
   $("body").css("background-color","white");
}
});

但它适用于当你滚动超过或低于特定数字像素时。我试图为一个特定的div得到同样的结果。

这是同样的结果。您只需确定div顶部与窗口顶部的距离。然后确定div的高度,将两者相加,以获得从要发生更改的顶部开始的像素距离。然后,当您滚动超过该点时,您将进行更改

$(function(){
    $(window).scroll(function() {
        var scroll = $(window).scrollTop(); // how many pixels you've scrolled
        var os = $('#div1').offset().top; // pixels to the top of div1
        var ht = $('#div1').height(); // height of div1 in pixels
        // if you've scrolled further than the top of div1 plus it's height
        // change the color. either by adding a class or setting a css property
        if(scroll > os + ht){
            $('#div2').addClass('blue');
        }
    });
});

请参阅此提琴:

您只需获取div元素的偏移量,并使用它来替换测试偏移位置。看一看:)

可能的重复并不是他想要完成的事情的重复。这和你两年前问的问题是一样的。完美的解决方案和解释。