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

Source Code: (back to article)

Result: Report an issue

<!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

<!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>