GeeksforGeeks

Sticky Element

How to make a div stick to the top of the screen once it’s been scrolled to?

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

This is div will stick to the top when it has been scrolled past

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

Output: Method 2: Setting the div to be stuck after it had scrolled past In this approach, the div is set to be fixed or relative based on scroll position. It calculates the element’s current position using getBoundingClientRect() and window.pageYOffset. If scrolled past, it sets ‘fixed’ with ‘top: 0px’; otherwise, it’s ‘relative’. The onscroll event is overridden to continuously update based on user scrolling. Example: This example illustrates the setup for the div to stuck after it had scrolled past.

GeeksforGeeks

How to make a div stick to the top of the screen once it’s been scrolled to?

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

This is div will stick to the top when it has been scrolled past

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.