In CSS, there are countless properties that enable you to control the look and feel of your web page. The CSS float property lets you wrap text around images, for example. The CSS font-size property lets you control the size of your text. The CSS !important property lets you override all other styling rules in CSS.

Free Intro Guide to HTML & CSS [Download Now]

Another common example is the CSS position property. This property allows you to position HTML elements to create ideal layouts. Whether you’re building your site from scratch or using a development framework like Bootstrap CSS, this property can save you time and avoid potential alignment issues as your project grows.

There are a variety of position types, including static, relative, fixed, absolute, and sticky positioning. In this post, we’ll explore the latter position type so you can create sticky elements on your web pages. Let’s get started.

What is CSS position: sticky?

By default, HTML elements are static. Meaning, they are displayed on the page according to where they are in the natural HTML flow. If an element is defined with the CSS position sticky, however, then its position will change as the user scrolls.

In CSS, sticky positioning has traits of relative and fixed positioning. A sticky element is positioned relative to its initial position in the HTML flow until it crosses a specific threshold in the viewport (ie. the user scrolls past a certain point on the page). At that point, the element sticks in place, like a fixed element, until it reaches the boundary of its parent element. This offset point is defined by specifying top, right, bottom, or left in the CSS position property.

Here’s an example of the syntax of the sticky position in CSS:

 

 

   .example {

  position: sticky;

  top: 0;

}

It’s important to note that the sticky position has some browser compatibility issues. Internet Explorer and Edge 15 (as well as earlier versions) do not support this position type. Safari does, but it requires the prefix “webkit.” We’ll see that in the first example.

Now let’s take a look at some examples using sticky positioning below.

How to Create a Sticky Element in HTML

Let’s say you have your website name above your navigation bar on your homepage. When the user scrolls far enough down the page that the navigation bar is at the very top of the screen, you want the navigation bar to stay fixed 10 pixels from the top.

Here’s the HTML with a lot of dummy text to see the effect of the sticky positioning more clearly:

 

 

   <div>

  <h1>CSS Position: Sticky Example</h2>

</div>

 

<div class="stickyexample">

  <p> After you scroll past its offset point, this element will stick 10 pixels from the top of the viewport.<p>

</div>

<div class="container-fluid">

  <h2>Let's scroll up and down the page...</h1>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

 

Here’s the CSS you’d use to create a lime green <div> element that sticks 10 pixels from the top of the screen in Safari (plus some margin and padding properties to make the layout prettier). 

 

 

   .stickyexample {

  position: -webkit-sticky;

  position: sticky;

  top: 10px;

  background-color: #00ff00;

  padding: 3px;

}

body {

  margin: 0;

}

h1, .container-fluid {

  margin: 15px;

}

Here’s the result:

CSS position sticky example

Source

How to Create a Sticky Element in Bootstrap

Creating sticky elements in Bootstrap differs slightly from the process explained above. That’s because Bootstrap offers shorthand utilities for quickly configuring the position of an element. These quick positioning classes are:

  • class="position-static”
  • class="position-relative”
  • class="position-absolute”
  • class="position-fixed”
  • class="position-sticky”
  • class="fixed-top"
  • class="fixed-bottom"
  • class="sticky-top"

That means you simply have to add the shorthand utility for sticky positioning in your HTML and define how far from the top, bottom, left, or right you want the element to stick in your CSS. If you use the .sticky-top class, then you won't have to add anything in your CSS.

Let’s say you want to make a sticky top Bootstrap navbar. To start, here’s the HTML to create a Bootstrap navbar (with no defined positioning). It will have a blue background color labelled “info,” some dummy navigation links to features and pricing pages, and a small breakpoint.

 

 

   <nav class="navbar navbar-expand-sm navbar-light bg-info">

  <a class="navbar-brand" href="#">Navbar</a>

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Features</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Pricing</a>

      </li>

</nav>

 

Because no positioning is defined, the navbar would be static by default. Here’s what it would like on the front end of a Bootstrap site:

CSS position static Bootstrap example

Source

To make the navbar stick to the top of the viewport, you’d simply have to add the .sticky-top utility as a class name of the <nav> element in your HTML.

Here’s what it would like in your HTML:

 

 

   <nav class="navbar navbar-expand-sm navbar-light bg-info sticky-top">

  <a class="navbar-brand" href="#">Navbar</a>

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Features</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Pricing</a>

      </li>

</nav>

 

Here’s what it would look like on the front end:

CSS position sticky Bootstrap example

Source

Why is position sticky not working?

Let’s say you start playing around with this position type and run into some problems.

If your element isn’t sticking, then go back to your HTML. If you placed the element with the sticky position style alone inside a wrapper element, it won’t stick. Why?

Because the sticky item’s container (or parent element) is the only area in which it can stick, the sticky item can only float over sibling elements. In other words, your sticky item cannot be an only child.

So let’s say you have a header above your Bootstrap navbar and you want the navbar to stick to the top of the screen once the user scrolls past its defined point. Then you’d use this CSS:

 

 

     .position-sticky {

  top: 0;

  }

The HTML below is incorrect because the sticky navbar is wrapped in a <div> element all alone.

 

 

   <h1>Hello, world!</h1>

<div>

<nav class="navbar navbar-expand-sm navbar-light bg-info position-sticky">

          <a class="navbar-brand" href="#">Navbar</a>

           <ul class="navbar-nav">

            <li class="nav-item active">

              <a class="nav-link" href="#">Home</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Features</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Pricing</a>

            </li>

          </ul>

        </nav>

</div>

<div>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

 

The navbar will not stick as a result.

CSS position sticky not working Bootstrap example

Source

The HTML below is correct because it has one parent <div> element that wraps around multiple child elements, including the sticky navbar as well as the heading and paragraph elements.

 

 

   <div>

<h1>Hello, world!</h1>

<nav class="navbar navbar-expand-sm navbar-light bg-info position-sticky">

          <a class="navbar-brand" href="#">Navbar</a>

           <ul class="navbar-nav">

            <li class="nav-item active">

              <a class="nav-link" href="#">Home</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Features</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Pricing</a>

            </li>

          </ul>

        </nav>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

 

The navbar will stick as a result.

CSS position sticky working Bootstrap example

Source

Making Elements Stick with CSS

With the CSS position property, you can move elements around on your page. If you’d like the position of an element to depend on the front-end user's scroll position, then you can use sticky positioning. With this position type, you can create sticky navigation bars, headers, footers, and more.

New Call-to-action
 css introduction

Originally published May 28, 2020 7:00:00 AM, updated May 28 2020

Topics:

Bootstrap CSS