Best IT Recipes

JQuery checks if an item is displayed in the viewport

The function of checking whether the "media" class is a div class inside the visual browser viewer regardless of the scroll position of the window.

<HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <div class="main"> <div class="media"></div> </div> </BODY> </HTML>

Trying to use this https://github.com/customd/jquery-visible plugin with this function, but I donโ€™t know how to make it work.

 $('#element').visible( true );
+65
javascript jquery visible
Dec 26 '13 at 21:16
source share
6 answers

Well, how did you try to make it work? According to the documentation for this plugin, .visible() returns a boolean value indicating whether the element is visible. Therefore, you will use it as follows:

 if ($('#element').visible(true)) { // The element is visible, do something } else { // The element is NOT visible, do something else }
+44
Dec 26 '13 at
source share

Check if the element is visible in the viewport without a plugin:

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

If the bottom position of the viewport is greater than the top position of the item AND the top position of the viewport is less than the bottom position of the item, the item is in the viewport (at least partially). Simply put, when any part of an element is between the upper and lower borders of your viewport, the element is visible on your screen.

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

The code below does 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 Beer and Andy discussed below. I hope this helps everyone who comes across this issue doing research like me. I also used the answer to the following question to formulate my answer: Show Div when the scroll position .

+57
Nov 29 '15 at 4:45
source share

You can write such a jQuery function to determine if an item is in the viewport.

Turn this on somewhere after you enable jQuery:

 $.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; };

Usage example:

 $(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 items, but does not check if the item is out of the horizontal viewport.

+48
Nov 17 '16 at 15:20
source share

You can see this example .

 // Is this element visible onscreen? var visible = $(#element).visible( detectPartial );

detectPartial:

  • True: the entire item is visible.
  • false: part of the element is visible

visible is a boolean that indicates whether an element is visible or not.

+3
Dec 26 '13 at 21:25
source share
 var visible = $(".media").visible();
0
Dec 26 '13 at 21:30
source share

Here you can do it without a plugin:

First find the position of the item. Then add the scroll position and height of the viewport.

If the combination of the scroll position and the height of the viewport is greater than or equal to the position of the item, it is displayed in the viewport.

 var element_position = $("#element").offset().top; var scroll_position = $(window).scrollTop(); var viewport_height = $(window).height(); if((scroll_position + viewport_height) > element_position){ // Do something because the element is in the viewport }
-four
Aug 6 '15 at 15:48
source share


More articles:


All Articles