当div的底部到达顶部时，jQuery添加类

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

您应该使用javascript的getBoundingClientRect()方法，观看$(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();