How to Set Sticky Positioning with CSS

Solutions with the CSS position property

The “sticky” value of the position property is a mixture of the relative and fixed positioning. To make the sticky positioning work as expected, you must specify at least one of the following properties: top, right, bottom, or left. Otherwise, it will be similar to relative positioning.

Let’s see some examples.

Example of setting a sticky header:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 200%;
      }
      nav {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
      }
      .nav-selections {
        text-transform: uppercase;
        letter-spacing: 5px;
        font: 16px "lato", sans-serif;
        display: inline-block;
        text-decoration: none;
        color: #fff;
        padding: 20px;
        float: right;
        margin-left: 5px;
        transition: 1.5s;
      }
      .nav-selections:hover {
        transition: 1.5s;
        color: black;
      }
      ul {
        background-color: #9ba4e0;
        overflow: auto;
      }
      li {
        list-style-type: none;
      }
      li:first-child {
        margin-right: 35px;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul align="left">
        <li>
          <a href="#/contact" class="nav-selections">Contact</a>
        </li>
        <li>
          <a href="#/about" class="nav-selections">About</a>
        </li>
        <li>
          <a href="#/products" class="nav-selections">Books</a>
        </li>
        <li>
          <a href="#" class="nav-selections">Home</a>
        </li>
      </ul>
    </nav>
  </body>
</html>

Sticky positioning has two main parts: sticky item and sticky container. Sticky item is the element specified with the position: sticky;. The element floats when the viewport matches the defined position. Sticky container is the element wrapping the sticky item. The container is the maximum area, within which the sticky item can float.

When you set the position to “sticky”, you automatically define the parent element as a sticky container.
The sticky item cannot get out of its sticky container.

Example of setting sticky positioning for the main content:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #sticky {
        position: sticky;
        position: -webkit-sticky;
        background: #e8ebe8;
        width: 80px;
        height: 80px;
        top: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 5px #000;
      }
      .extra,
      #wrapper {
        width: 75%;
        margin: auto;
        background-color: #9ad996;
      }
      #wrapper {
        height: 800px;
      }
      .extra {
        height: 100px;
      }
      body {
        font-family: georgia;
        height: 1000px;
      }
      @media (min-height: 768px) {
        #wrapper {
          height: 2000px;
        }
      }
    </style>
  </head>
  <body>
    <div class="extra"></div>
    <br />
    <div id="wrapper">
      <div id="sticky">Sticky box
      </div>
    </div>
    <br />
    <div class="extra"></div>
  </body>
</html>

Sticky elements are similar to fixed elements. They both maintain the position on the screen when scrolling the page. The difference is that the sticky element can only be within the scope of its parent container, whereas the element with fixed positioning can be out of the scope of its parent element.