How to make a div 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make make a div stick to 
      the top of the screen once it’s 
      been scrolled to?
    </title>
    <style>
        .sticky-div {
            background-color: green;
            position: sticky;
            top: 0px;
            padding: 10px 0px;
        }
          
        .start {
            height: 100px;
        }
          
        .end {
            height: 500px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
    GeeksforGeeks
  </h1>
    <b>
    How to make make a div stick
    to the top of the screen once
    it’s been scrolled to?
  </b>
    <p class="start">
        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.
    </p>
    <div class="sticky-div">
        This is div will stick to the top when it has been scrolled past
    </div>
    <p class="end">
        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.
    </p>
</body>
  
</html>

chevron_right


Output:



  • Before scrolling down:
    position-sticky-before
  • After scrolling down:
    position-sticky-after

Method 2: Setting the div to be stuck after it had scrolled past

This method attempts to emulate the “position: sticky” method. The element is set to ‘fixed’ or ‘relative’ depending upon whether the user has scrolled past the element.

The element to be stuck is first identified and its current position on the page is calculated. This is done by adding the position of the element relative to the viewport with the current scroll position.

The getBoundingClientRect() method returns a DOMRect object of which the ‘top’ value could be used to get the position relative to the viewport. The current vertical scroll position can be found out by using the window.pageYOffset property. Adding both these values would give us the position of the element on the page regardless of the current scroll position.

The onscroll method is then overridden with a new function to calculate the current scroll position and compare it to the element’s position on the page. If the vertical scroll is more than the element’s position, the position property is set to ‘fixed’ and the ‘top’ property is given a value of ‘0px’. Otherwise, the position is set to ‘relative’ and the ‘top’ property is reset using the ‘initial’ value.

This will compare and make the element stick whenever the user scrolls past the element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make make a div stick to 
      the top of the screen once it’s 
      been scrolled to?
    </title>
    <style>
        .sticky-div {
            background-color: green;
            position: relative;
            width: 100%;
            padding: 10px 0px;
        }
          
        .start {
            height: 100px;
        }
          
        .end {
            height: 500px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
    GeeksforGeeks
  </h1>
    <b>
    How to make make a div stick
    to the top of the screen once
    it’s been scrolled to?
  </b>
    <p class="start">
        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.
    </p>
    <div class="sticky-div">
        This is div will stick to the top when it has been scrolled past
    </div>
    <p class="end">
        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.
    </p>
    <script>
        stickyElem =
            document.querySelector(".sticky-div");
  
        /* Gets the amount of height
        of the element from the
        viewport and adds the
        pageYOffset to get the height
        relative to the page */
        currStickyPos = 
          stickyElem.getBoundingClientRect().top + window.pageYOffset;
  
        window.onscroll = function() {
  
            /* Check if the current Y offset
            is greater than the position of
            the element */
            if (window.pageYOffset > currStickyPos) {
                stickyElem.style.position = "fixed";
                stickyElem.style.top = "0px";
            } else {
                stickyElem.style.position = "relative";
                stickyElem.style.top = "initial";
            }
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before scrolling down:
    emulate-before
  • After scrolling down
    emulate-after

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.