изменение CSS при прокрутке в прошлом или ниже определенного DIV

Question

посмотреть здесь: http://jsfiddle.net/1L5y559z/

Скажем, я хочу, чтобы изменить цвет фона тела, когда кто-то свиток в прошлом или ниже Div 1, как бы я сделать это с помощью 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.

Answer 1

Это то же самое. вам просто нужно определить, как далеко верхняя часть 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'); 
     } 
    }); 
}); 

увидеть эту скрипку: http://jsfiddle.net/5d922roc/

Answer 2

Вы можете просто получить смещение элемента сНа и использовать его, чтобы заменить смещение позиции теста. Взгляните на http://api.jquery.com/offset/ :)