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

In this tutorial, we will learn how to make a div stick to the top of the screen once it's been scrolled to using CSS? By Apurva Mathur Last updated : July 22, 2023

Answer: Use the position and top properties

To make a div stick to the top of the screen once it's been scrolled to, you can use the position and top properties with the values 'sticky' and 2px respectively. The value of the top property can be changed as per your requirement. When you will scroll the div will be sticky on the top position based on the given top's value.

The CSS position property

Position Property is a type of CSS property that is used to set the position of HTML content. This HTML content can be anything including text, links, background images, etc.

It has the following values: static, relative, fixed, sticky, and absolute. To stick the div to the top of the screen, we can use position:"sticky" and position:"fixed" property.

position:"sticky": Position sticky property sticks the element when it reaches a specific point. This specific point can be anything for example in the code given below I have given top: 2px; so when it reaches where top=2px; it will stick.

CSS to make a div stick to the top of the screen

Consider the below-given CSS styes to make a class sticky on the top.

<style>
  .sticky{
  /*Main propeties*/
  position:sticky;
  top: 2px;
  /*Others*/
  background-color: #f40;
  color: #fff;
  padding: 16px;
  text-align:center;
  font-size:18px;
  }
</style>

Example to make a div stick to the top of the screen using CSS

Consider the below-given example in which we have a CSS class named "sticky" to make an element sticky on the top. We are applying this class to the div to make it sticky on the top.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .sticky{
      /*Main propeties*/
      position:sticky;
      top: 2px;
      
	  /*Others*/
      background-color: #f40;
      color: #fff;
      padding: 16px;
      text-align:center;
      font-size:18px;
      }
    </style>
  </head>
  
  <body style="height: 1000px">
    <div class="sticky">
      <p>This content will stay here</p>
      <p>Hello world! How're you? Welcome at IncludeHelp</p>
    </div>
	
    <h2>What is Lorem Ipsum?</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br/>
      when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br/>
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, <br/>
      and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
	
    <h2>Where does it come from?</h2>
    <p>
      Contrary to popular belief, Lorem Ipsum is not simply random text. <br/>
      It has roots in a piece of classical Latin literature from 45 BC, <br/>
      making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, <br/>
      looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, <br/>
      and going through the cites of the word in classical literature, discovered the undoubtable source. <br/>
      Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"<br/>
      (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, <br/>
      very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </p>

  </body>
</html>

The output of the above example is –

Example: make a div stick to the top of the screen

Explanation

In the above code, I've given position:"sticky" property to the specified div and top=2px; so that it will stick the div at top=2px. You can try to change the value and you’ll observe that the div will become sticky when that specific value is hit.

(It's important to maximize your screen height only then you’ll able to see the scrollable effect.)

We can also use position:"fixed" it will also give the same result, the only difference between their working is that when position:"fixed" is used it does not require any specific threshold value; it will just simply fix the element wherever you want.

CSS Examples »

How to make a vertical line in HTML using CSS?

How do I center floated elements using CSS?