How to Make a Div Stick to the Top of Screen when Scrolling with CSS and Javascript

This snippet will help you to make a <div> stick to the top of the screen when you scroll the page. This can be helpful when there is a need to make some important elements stay in focus and always make them visible even if the user is at the bottom of the page.

Here, we'll demonstrate examples where we use HTML and CSS, and another example with Javascript added.

First, let us show an example where we use CSS. We’ll start with creating HTML.

Create HTML

Use a <div> element with a class name "sticky".
Use <p> and <h2> elements.

<p>Scroll down this page.</p>
<div class="sticky">Box Div</div>
<h2>Scroll again to the top to "remove" the sticky position.</h2>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Add CSS

Set the position to “sticky”. For Safari, use -webkit-sticky.
Set the top property to 0.
Add the background-color, padding, and font-size properties.

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #666;
  padding: 40px;
  font-size: 25px;
}

Now, let’s see the result of our code.

Example of making a <div> stick to the top of the screen using CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        background-color: #666;
        padding: 40px;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <p>Scroll down this page.</p>
    <div class="sticky">Sticky Div</div>
    <h2>
      Scroll again to the top to "remove" the sticky position.
    </h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
      when an unknown printer took a galley of type and scrambled it to make a type 
      specimen book. It has survived not only five centuries, but also the leap
      into electronic typesetting, remaining essentially unchanged. It was 
      popularised in the 1960s with the release of Letraset sheets containing 
      Lorem Ipsum passages, and more recently with desktop publishing software 
      like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is 
      simply dummy text of the printing and typesetting industry. Lorem Ipsum 
      has been the industry's standard dummy text ever since the 1500s, when 
      an unknown printer took a galley of type and scrambled it to make a 
      type specimen book. It has survived not only five centuries, but also 
      the leap into electronic typesetting, remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets containing
      Lorem Ipsum passages, and more recently with desktop publishing software 
      like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply
      dummy text of the printing and typesetting industry. Lorem Ipsum has been 
      the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, 
      remaining essentially unchanged. It was popularised in the 1960s with the release of 
      Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem 
      Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
      Ipsum has been the industry's standard dummy text ever since the 1500s, 
      when an unknown printer took a galley of type and scrambled it to make a 
      type specimen book. It has survived not only five centuries, but also 
      the leap into electronic typesetting, remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets 
      containing Lorem Ipsum passages, and more recently with desktop publishing
      software like Aldus PageMaker including versions of Lorem Ipsum.Lorem 
      Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 
      1500s, when an unknown printer took a galley of type and scrambled it to 
      make a type specimen book. It has survived not only five centuries, but 
      also the leap into electronic typesetting, remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets containing 
      Lorem Ipsum passages, and more recently with desktop publishing software like 
      Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy 
      text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
      standard dummy text ever since the 1500s, when an unknown printer took a galley of 
      type and scrambled it to make a type specimen book. It has survived not only five
      centuries, but also the leap into electronic typesetting, remaining essentially 
      unchanged. It was popularised in the 1960s with the release of Letraset sheets
      containing Lorem Ipsum passages, and more recently with desktop publishing
      software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum 
      is simply dummy text of the printing and typesetting industry. Lorem Ipsum has 
      been the industry's standard dummy text ever since the 1500s, when an unknown 
      printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, 
      remaining essentially unchanged. It was popularised in the 1960s with the release of 
      Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is 
      simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
      industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type  and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

As you can see, the <div> sticks to the top of the screen, but it goes back to its original position when scrolling back to the top of the page.

The element with position: sticky; is positioned regarding the user's scroll position. Depending on the scroll position, the sticky element switches between relative and fixed.

Next, we’ll demonstrate an example where we also use Javascript.

Example of making a <div> stick to the top of the screen using CSS and JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #boxThis {
        padding: 5px;
        background-color: #80c294;
        font-size: 1.5em;
        width: 300px;
        text-align: center;
        font-weight: bold;
        border: 1px solid #666;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      }
      #boxThis.box {
        margin-top: 0;
        position: fixed;
        top: 0;
        z-index: 9999;
        -webkit-border-radius: 0 0 10px 10px;
        border-radius: 0 0 10px 10px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </head>
  <body>
    lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br />
    <div id="boxHere"></div>
    <div id="boxThis">Box</div>
    lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br /> lorem
    <br />
    <script>
      function boxtothetop() {
        var windowTop = $(window)
          .scrollTop();
        var top = $('#boxHere')
          .offset()
          .top;
        if(windowTop > top) {
          $('#boxThis')
            .addClass('box');
          $('#boxHere')
            .height($('#boxThis')
              .outerHeight());
        } else {
          $('#boxThis')
            .removeClass('box');
          $('#boxHere')
            .height(0);
        }
      }
      $(function() {
        $(window)
          .scroll(boxtothetop);
        boxtothetop();
      });
    </script>
  </body>
</html>