Determining Whether an Element Is Within the Viewport - J Query

Problem
You want to determine whether an element is visible within the view port; further, you want to determine the percentage of the element that is visible and scroll to it if it is less than 50 percent visible.

Solution

This makes use of several of the methods discussed in earlier sections of this chapter.There are several steps to this process:

  1. Determine the size of the viewport.
  2. Determine the scroll position of the document.
  3. Figure out the minimum and maximum values for the top and left positions of the element if the element is visible.
  4. Test the position of the element against those values.

With this solution, we know whether the top of the element is visible in the viewport; a better solution would test whether the entire element was contained in the viewport:

Alternatively, we could look at how much of the element is visible—if it is less than a certain amount, then we can scroll to the element:


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics