javascript - 当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 value 会给你你需要的东西(如果它是负数，你的元素一直在上升)

$(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/