Check if element is visible in div

Question

I have a div with many li's inside.

<div>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
...
</div>

Typically when the user is scrolling inside the window, some <li>'s get into the overflow and will be hidden. I know I can check if an element is in the viewport of the screen with this jQuery Plugin: http://www.appelsiini.net/projects/viewport I would just need this functionality, but not for the whole screen, but on a single div only. So I could update some text when elements aren't visible.

Need some help, Thanks in advance!

this code there checks if the element is visble on screen, not on div. My element cannot be seen when you scroll inside the div. Maybe it is posibile to edit that given code to work for me? — Kimmax, Jun 21 '13 at 00:42
@Kimmax *when* do you want to check whether they are visible? — Explosion Pills, Jun 21 '13 at 00:50
I have a little info box on the right. So when the user scrolls down to the next item, I want to update this info box. So it would be fine to get an 'event' triggered when 3/4 of the element are still shown, but triggering an event at the end of the element would do the job too — Kimmax, Jun 21 '13 at 00:56

score 6 · Accepted Answer · edited May 23 '17 at 12:24

This is a very good answer, but here's a modified version of the Viewport plugin you mentioned.

(function($) {

$.belowthefold = function(lookIn, elements, settings) {
    var fold = $(lookIn).height() + $(lookIn).scrollTop();
    return $(elements).filter(function(){
        return fold <= $(this).offset().top - settings.threshold;
    });
};

$.abovethetop = function(lookIn, elements, settings) {
    var top = $(lookIn).scrollTop();
    return $(elements).filter(function(){
        return top >= $(this).offset().top + $(this).height() - settings.threshold;
    });
};

$.rightofscreen = function(lookIn, elements, settings) {
    var fold = $(lookIn).width() + $(lookIn).scrollLeft();
    return $(elements).filter(function(){
        return fold <= $(this).offset().left - settings.threshold;
    });
};

$.leftofscreen = function(lookIn, elements, settings) {
    var left = $(lookIn).scrollLeft();
    return $(elements).filter(function(){
        return left >= $(this).offset().left + $(this).width() - settings.threshold;
    });
};

})(jQuery);

With HTML like this:

<div id="lookInMe">
    <div class="peek"></div>
    <div class="peek"></div>
    [ ... ]
</div>

Call it like this:

$.belowthefold("#lookInMe", ".peek", {threshold : 0}).text("Below");
$.abovethetop("#lookInMe", ".peek", {threshold : 0}).text("Above");
$.leftofscreen("#lookInMe", ".peek", {threshold : 0}).text("Left");
$.rightofscreen("#lookInMe", ".peek", {threshold : 0}).text("Right");

http://jsfiddle.net/daCrosby/vhF7x/1/

Check if element is visible in div

1 Answers1

Linked