It's fairly common to need to check if an element is visible in the viewport. Surprisingly, there's no built-in method to do this, at least not in a straightforward way. Luckily, JavaScript provides all the necessary tools to roll up our own solution.
The first step requires us to get the coordinates of the element. We can do this, using the Element.getBoundingClientRect[] method and object destructuring. This method returns an object with the coordinates of the element's top, right, bottom, and left edges, as well as the width and height of the element.
We also need to know the dimensions of the viewport. We can get these, using the Window.innerWidth and Window.innerHeight properties. Then, we can use these values to determine if the element is visible in the viewport.
If we want to check if the element is entirely visible, we can simply compare the element's coordinates with the viewport's dimensions. If we want to check if the element is partially visible, we need to compare the element's coordinates with the viewport's dimensions and the element's dimensions.
Wrapping everything up, we can use an optional argument to determine if we want to check if the element is partially visible or not.
In this article, we will see how to make a sticky element that will stick to the top of the screen. Here, we have used the div to stick to the top of the screen.
Method 1: Using the sticky value of the position property
The ‘sticky’ value of the position property sets an element to use a ‘relative’ position unless it crosses a specific portion of the page, after which the ‘fixed’ position is used. The vertical position of the element to be stuck can also be modified with the help of the ‘top’ property. It can be given a value of ‘0px’ to make the element leave no space from the top of the viewport, or increased further to leave space from the top of the viewport.
Example: This example illustrates the use of the position property to stick to the top of the element.
HTML