CODEWITHSUNDEEP
javascriptjquery
Ashley Graham
Ashley Graham

Reputation: 131

Check if div is viewable in window?

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?

Upvotes: 13

Views: 10303

Answers (6)

Peter Højlund Palluth
Peter Højlund Palluth

Reputation: 901

2022 answer - you don't have to use jQuery anymore for this

Now it is possible to use plain javascript with IntersectionObserver.

The problem with the other answers are that they fire off too many times.

For example you could to this:

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true) {
        console.log('Element is in the window');
    } else {
        console.log("Element is not in the window"); 
    }
});

observer.observe(document.querySelector(".myObject"));

Upvotes: 0

Luke
Luke

Reputation: 19971

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:

Upvotes: 17

korywka
korywka

Reputation: 7653

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

source: Check if element is visible after scrolling

Upvotes: 1

Mak
Mak

Reputation: 20453

If you are using jQuery just try to check the document position

$('html').position().top;

for example:

$(document).bind("scroll", checkLink);

function checkLink(){

   /* Position will checked out after 1 sec when user finish scrolling  */
   var s = setTimeout(function(){ 

     var docHeight = $('html').position().top;
     var allLinks = $('.navigation a');

     if ( docHeight < 0 && docHeight <= -1000 ) { 

        allLinks.removeClass('active');
        $('a.firstlink').addClass('active');

     } else 
     if ( docHeight < -1000 && docHeight <= -2000 ) { 

        allLinks.removeClass('active');
        $('a.secondlink').addClass('active');

     } else { /* .... */ }

   $(document).bind("scroll", checkLink);
   }, 1000);

  $(document).unbind('scroll');
}

but guys in your example haven't held on this for a long time :) they just toggle classes on click 

$('#navigation').localScroll();
    $('#navigation li a').click( function () {
        $('#navigation li a').removeClass("active");
        $(this).addClass("active");
    });

Upvotes: 0

ValeriiVasin
ValeriiVasin

Reputation: 8706

Use $('#element').offset().top; to detect element top side.

$(window).scrollTop(); to detect current scroll position.

And $(window).height(); to detect current window height.

And after that steps you actually need only something easy math calculations.

Upvotes: 4

Kae Verens
Kae Verens

Reputation: 4079

see the following lazyload plugin:

http://plugins.jquery.com/files/jquery.lazyload.js__6.txt

the section which starts with the comment "return the status of the item relative to the current view" checks to see if an element is visible in the viewport.

Upvotes: 0

Related Questions