JQuery Добавить класс, когда нижняя часть div достигает вершины

Question

Я пытаюсь добавить класс, когда нижняя часть div достигает вершины окна, но я не уверен, как это сделать. Мне удалось добавить класс, когда вершина div попадает в верхнюю часть окна, но мне не очень повезло с дном div.

код я использую:

$(document).ready(function() { 
var menuLinksTop = $('.container').offset().top; 

var menuLinks = function(){ 
    var scrollTop = $(window).scrollTop(); 

    if (scrollTop > menuLinksTop) { 
     $('header').addClass('black-links'); 
    } else { 
     $('header').removeClass('black-links'); 
    } 
}; 

menuLinks(); 

$(window).scroll(function() { 
    menuLinks(); 
}); 

Любая помощь приветствуется.

Answer 1

Вы должны использовать getBoundingClientRect() метод в JavaScript, смотреть $(window).scroll событие, и посмотреть на прямоугольник элемента, его значение bottom даст вам то, что вам нужно (если он отрицательный, ваш элемент полностью вверх)

$(window).scroll(function() { 
    console.log($("div.watch")[0].getBoundingClientRect()); 
    if ($("div.watch")[0].getBoundingClientRect().bottom < 0) 
     alert ("i'm out :3"); 
}); 

см jsFiddle http://jsfiddle.net/ja5nnbwr/2/

Answer 2

Добавить высоту div. Предполагая, что это является .container:

var menuLinksTop = $('.container').offset().top + $('.container').height();