Check if div is viewable in window?

Question

I have a one page site with fixed navigation and using a scroll script, very similar to this: http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html

What I'm looking for is a way to check what section is viewable in the window to set the active state on the nav when using the browsers scroll bar, any ideas?

Answer 1

Here are all the variables you'll need...

var $myElt       = $('.myElement');      // whatever element you want to check
var $window      = $(window);            // the window jQuery element
var myTop        = $myElt.offset().top;  // the top (y) location of your element
var windowTop    = $window.scrollTop();           // the top of the window
var windowBottom = windowTop + $window.height();  // the bottom of the window

Then to make sure your element is within the window's range...

if (myTop > windowTop && myTop < windowBottom) {
    // element is in the window
} else {
    // element is NOT in the window
    // maybe use this to scroll... 
    // $('html, body').animate({scrollTop: myTop}, 300);
}

jQuery reference:

• http://api.jquery.com/offset/
• http://api.jquery.com/height/
• http://api.jquery.com/scrollTop/