Jquery check if element is visible in viewport

javascript jquery visible

294,402

Solution 1

According to the documentation for that plugin, .visible() returns a boolean indicating if the element is visible. So you'd use it like this:

if ($('#element').visible(true)) {
    // The element is visible, do something
} else {
    // The element is NOT visible, do something else
}

Solution 2

You can write a jQuery function like this to determine if an element is in the viewport.

Include this somewhere after jQuery is included:

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

Sample usage:

$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // do something
    } else {
        // do something else
    }
});

Note that this only checks the top and bottom positions of elements, it doesn't check if an element is outside of the viewport horizontally.

Solution 3

Check if element is visible in viewport using jquery:

First determine the top and bottom positions of the element. Then determine the position of the viewport's bottom (relative to the top of your page) by adding the scroll position to the viewport height.

If the bottom position of the viewport is greater than the element's top position AND the top position of the viewport is less than the element's bottom position, the element is in the viewport (at least partially). In simpler terms, when any part of the element is between the top and bottom bounds of your viewport, the element is visible on your screen.

Now you can write an if/else statement, where the if statement only runs when the above condition is met.

The code below executes what was explained above:

// this function runs every time you are scrolling

$(window).scroll(function() {
    var top_of_element = $("#element").offset().top;
    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // the element is visible, do something
    } else {
        // the element is not visible, do something else
    }
});

This answer is a summary of what Chris Bier and Andy were discussing below. I hope it helps anyone else who comes across this question while doing research like I did. I also used an answer to the following question to formulate my answer: Show Div when scroll position.

294,402

Vim Bonsu

Updated on July 08, 2022

Comments

Vim Bonsu almost 2 years
Function to check if the div class "media" is within the browsers visual viewport regardless of the window scroll position.
```
<HTML>
<HEAD>
  <TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
  <div class="main">
   <div class="media"></div>
  </div>

</BODY>
</HTML>
```
Trying to use this plugin https://github.com/customd/jquery-visible with this function but I don't know how to make it work.
```
$('#element').visible( true );
```
slvnperron over 10 years

you should remove the (true) in visible()
David over 10 years

@slvnperron: Why? It's a valid use of the plugin, and corresponds to the original code posted in the question.
slvnperron over 10 years

well he probably want to check for the entire div visibility, the argument is for partial detection
ThunderPhoenix over 10 years

@slvnperron: True : the entire element is visible, false : part of the element is visible
ThunderPhoenix over 10 years

I not sure that it's subtle to use class selector .media, because if there many elements which belong to media class ...
Vim Bonsu over 10 years

@David So this code works okay BUT here is the site I'm working on dev1.envisionwebdesign.co/johnreid/campaign.html. The site is a one page html with 16 sections. The first section does not have the navigation and text block on the left. All others do. What I need is when you scroll to each section, the navigation and text block slide in (They are contained in the same div element "media-nav"). I'm using this plugin for the transition effect link. –
Vim Bonsu over 10 years

@David The problem is the transition happens immediately after the site loads and not when the element is "in-view". Each section is contained in a div with class like so (.page1, .page2, .page3 ....). the div class "media-nav" is contained in each of the above divs. What I need is, when a div like ".page2" is in view, it's ".media-nav" transitions in –
Solace about 9 years

@David May be you can suggest something for my problem here?
standac about 8 years

I think it should be $("#element").outerHeight();
Maurice almost 8 years

little correction; like @boblapointe points out: it should be outerheight(), and a dot ('.') is missing between offset()top
Bruno Casali over 7 years

Without plugin?! what about: $(window).scroll??
Whip over 7 years

Are you referring to jquery?
Karlth about 7 years

If checking within a div (not the window) then remember to subtract the parent divs offset.
ADB almost 7 years

A previous version of this answer may also be helpful if you want to detect when an element first enters view/is fully in view, and then when it begins to leave view (when the top of the next element is visible).
Arthur Tarasov almost 7 years

you would subtract offset like this if your button is on top and element appears on the bottom: return ( elementBottom > viewportTop ) && ( elementTop < viewportBottom - $( this ).height() );
Rob almost 7 years

@ADB This works great for id's but not classes. Is there a way to get that working?
Capy almost 7 years

Thanks! I made a more complete plugin using your code as base: github.com/frontid/jQueryIsInViewport
jyoseph over 6 years

Killer solution to handle simple cases without the need for an additional plugin.
Michael Okoli over 6 years

@David link is broken.
Steven about 6 years

$(window).height() doesn't factor in a mobile device's zoom (at least when using jQuery v1.9). A better solution is to use window.innerHeight, which does change when pinching the screen to zoom in on a mobile device.
Si8 over 5 years

btw this doesn't work if you are using Chrome debugger in mobile mode and click on the page and scroll. Only works if I use the trackwheel to scroll up and down. Unless I am missing something
Andy over 4 years

This is the right way to do it. Thanks.
cupiqi09 over 4 years

This is not a standard jQuery function ("visible is not a function)
cupiqi09 over 4 years

This is not a standard jQuery function ("visible is not a function)
Krzysztof Wołowski about 4 years

And what about the vertical boundaries of the viewport? With sliders/carousels an element that is inside the horizontal boundaries of the viewport could still be outside of the vertical ones.
Cerin over 3 years

A nice little library. Unfortunately, it's abandoned and no longer works with current versions of jQuery. It throws errors like Uncaught TypeError: r.getClientRects is not a function, which is common of libraries incompatible with jQuery>3.
Black over 3 years

Way to complicated. You should just have to call a method where you put in the element and it gives you back if it is visible or not.
Black over 3 years

This solution does not work if the element is not in the viewport because it is too far right or left
Tom Pažourek over 3 years

@Black Yes, it's written in the answer, please see the last sentence.
Jishnu V S over 2 years

what if a section height greater than bottom_of_element ?