CODEWITHSUNDEEP
jqueryscroll
Ana DEV
Ana DEV

Reputation: 1030

How to track if element is visible on screen with same class when scrolling with jquery

I have products listed under each other(each product has the same class productItem) by one and wanna create the following

When user scrolls to the product and when one product starts to be visible i need to display that current visible product some info on the bottom with fixed position like price, title, link etc.

I have tried the following code but it did not work cause my elements are with the same class

$.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));
    };
    jQuery(document).scroll(function(){
        alert(jQuery('.productItem').isOnScreen());
    });

Any idea how i can fix this?

Thanks

Upvotes: 0

Views: 1511

Answers (1)

TCHdvlp
TCHdvlp

Reputation: 1334

Have you tried to apply your function to each elements ? And, you should use the console to debug it, not alerts ;) 

$('.productItem').each(function(){ 
    console.log($(this).isOnScreen());
});

Upvotes: 1

Related Questions