Question

When the user scrolls down on my website, I’d like to detect when the very top header is out of view. Is this possible with jquery?

Answer 1

As mentionaed by @RoryMcCrossan, you can calculate it yourself.

If you want a little more flexibillity, try this jQuery plugin:

http://www.appelsiini.net/projects/viewport

it’ll let you query the DOM based on whether the element is within the visible viewport.

For example:

$("div:in-viewport")

will only return divs that are currently visible.

You can also query for elements that are not visible, based on where they are. Mainly:

$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")

Check out the link above for more info, and the download.

---

If you want to use this library to query for elements not currently shown,
regardless of where they are, then use this:

$("div").not(":in-viewport")

---

So, assuming your header has an ID of header, you might use this:

var $header = $('#header');

$(window).scroll(function()
{
    var isVisible = $header.is(':in-viewport');
    // Now show, hide, or do whatever you want...
});