Search code examples
jqueryjquery-selectors

How to select visible elements on screen?

How to select with CSS emements which actualy visible to user?

Actualy on screen?

Solution

  • There is a jQuery plugin that adds selectors to help you with this task of see if something is visible to the user or not (ViewPort).

    You can see and download it from here.

    It basically adds the following selectors:

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

    And in your case I think the first one is the one you need. The others are more detailed, to determine the location of the visually hidden object.