How to keep element in viewport?

Question

I have a html element which is displayed when a button is clicked. It's kinda like a popup. I want to check if it's in the ViewPort of the browser and then place it inside the ViewPort . Is there a right way to achieve that?

At the moment I'm checking the height of the ViewPort and compare it to the point where the element will be attached to. So I do something like this:

If(window.innerHeight > yPointWhereElementIsAttachedTo + heightOfElement) //attach element; 

But what is the right way to do it?

Answer 1

This can be achieved by using position: fixed; on an element with positioning.

For example:

 .fixed { position: fixed; width: 300px; height: 100px; background: red; left: 10px; top: 40px; } .wrapper { min-height: 4000px; } 

 <div class="wrapper"> <div class="fixed"> I am fixed in the viewport </div> </div> 

Answer 2

You could use scrollIntoView() if a more dynamic approach is required.

 var elmnt = document.getElementById("content");
 elmnt.scrollIntoView();

https://www.w3schools.com/jsref/met_element_scrollintoview.asp