Jquery inview元素应该在加载和滚动时工作

时间:2014-06-18 13:15:43

标签: javascript jquery scroll

我试图通过向元素添加一个类来使这个inview函数工作,并在不查看时删除它。 不确定我错过了什么...请帮忙吗?

http://jsfiddle.net/zefjh/

$.fn.isOnScreen = function () {

    var win = $(window);

    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

$('.box').click(function () {
    alert($('.box').isOnScreen());
});

if ($('.box').isOnScreen() == true) {
    $('.box').addClass('inview');
}
$(window).scroll(function () {
    if ($('.box').isOnScreen() == true) {
        $('.box').addClass('inview');
    } else {
        $('.box').removeClass('inview');
    }
});

2 个答案:

答案 0 :(得分:1)

您可以使用$.each在滚动时检查每个.box,无论是否在屏幕上。

$.each($(".box"), function(){ if ($(this).isOnScreen()) { $(this).addClass('inview'); }
else{ $(this).removeClass('inview'); } });

另外:您的点击功能应该使用this

检查点击的元素是否在屏幕上

$('.box').click(function(){ alert($(this).isOnScreen()); });

最后:您可以将== true部分留在if语句中。

完整示例:http://jsfiddle.net/zefjh/2/

答案 1 :(得分:0)

我在小提琴中修改了你的功能,只需检查一下

fiddle http://jsfiddle.net/kka284556/zefjh/4/

我滚动