Scroll detect

[GeekPlease]

Good day folks,

I am working on a project now and I'm wondering how
to detect if a div is visible in the screen while the user
is scrolling on the page.

Hope someone will be able to shed some light. Thanks :D

[minitauros]

You could use jQuery's $(window).scroll() function, which can execute a function on scroll. That function could then check what the screen's height is ($(window).height()), how far the user has scrolled from the top ($(window).scrollTop()) and then use those values in a calculation to see what part of the screen is visible.

[GeekPlease]

Still can't make it. Can you send a fiddle? Thanks

[minitauros]

E.g.

var element = $('div#id');

$(window).scroll(function()
{
    if(
        $(window).scrollTop() > element.offset().top + element.outerHeight() - $(window).height()
        && $(window).scrollTop() < element.offset().top + element.outerHeight()
    )
    {
        //* The element is visible. Do some stuff here.
    }
});