Using getBoundingClientRect () to implement a method of scrolling the DIV container

This article mainly introduces how to use getBoundingClientRect () to implement the DIV container scrolling fixed, with a certain reference value, the friends you need can refer to it. I hope that everyone has a big gain after reading this article. Let’s take a look at you with everyone.

Ele.GetBoundingClientRect () method is to get a position of an element in the entire view window

You can return the value of Return has Width, Height, Top, Left, X, Y, Right, Bottom

scene

when a central location one of your div is in the viewport

the effect you want when the page is scrolled to the div when the div on Fixed at the top position of the page, other rolling unchanged

Idea

Implemented ideas can take this method to get this DIV TOP value

This top value is this div to the top viewport value

to scroll event listeners when the top of the page and then the value of <=0的时候 你可以给这个div加一个fixed固定的一个css样式

can achieve such an effect is the

thank you to carefully read the complete article I hope that Xiaobian share how to use getBoundingClientRect () to implement the DIV container scrolling fixed content help everyone, and also hope that you will support Tumi clouds, pay attention to Tumi Cloud Industry Information Channel. If you encounter problems, you will find Tumi clouds, detailed solutions Waiting for you to learn!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment