CSS Sticky

The CSS position property sets the position for an HTML element. It is also used to place an item behind another element and is useful for the scripted animation effect. The "position: sticky;" is used to position the element based on the user's scroll position.

This CSS position property allows the elements to stick when the scroll reaches a certain point. Depending on the scroll position, a sticky element toggles between fixed and relative. The element will be positioned relative until the specified position of offset is met in the viewport. Then, similar to position: fixed, the element sticks in one place.

Illustrations of the CSS Position: Sticky

Let us comprehend the CSS property properly with the help of illustrations.

Illustration 1:

We will create the sticky element in this illustration with the help of CSS.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration of CSS Sticky Position</title>
    <style>
        body {
            text-align: center;
        }
        .bottom {
            padding-bottom: 2000px
        }
        .sticky-position {
            position: sticky;
            font-size: 20px;
            font-weight: bold;
            top: 50px;
            padding: 10px;
            background-color: lightblue;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <h1>Scroll and see the effect</h1>
    <div class="sticky-position">Sticky Element</div>
    <div class="bottom">
        <h2>Hello World</h2>
        <p>Welcome to Javatpoint</p>
    </div>
</body>
</html>

Output:

We can witness in the output that the HTML element in sky blue is not moving even after scrolling as it is the sticky element, so it will stay where it is.

Illustration 2:

We will construct the sticky navbar with the help of the CSS sticky position in this illustration.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration of the Sticky Navbar</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        .stickyNavbar {
            position: sticky;
            top: 0;
            background-color: rgb(248, 148, 148);
            padding: 10px;
        }
        a {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="stickyNavbar">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Facilities</a>
        <a href="#">Contact us</a>
    </div>
    <div>
    <p>
        Text line 1 <br>
        Text line 2 <br>
        Text line 3 <br>
        Text line 4 <br>
        Text line 5 <br>
        Text line 6 <br>
        Text line 7 <br>
        Text line 8 <br>
        Text line 9 <br>
        Text line 10 <br>
        Text line 11 <br>
        Text line 12 <br>
        Text line 13 <br>
        Text line 14
    </p>
</div>
</body>
</html>

Output:

We can witness in the output that the navbar is not moving when scrolling as it is the sticky element so that it will remain in the same place.

Illustration 3:

We will construct 1 sticky main heading and 2 sticky paragraph headings with the help of the CSS sticky position in this illustration.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration of making the sticky paragraph heading</title>
    <style>
        body {
            font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
        }
        .sticky-paragraph {
            top: 0;
            position: sticky;
            background-color: rgb(26, 203, 144);
        }
        p {
            font-size: 25px;
            background-color: rgb(157, 211, 193);
        }
    </style>
</head>
<body>
    <h1 class="sticky-paragraph">Introduction of CSS Sticky</h1>
    <p>
        <br> <br> <br> <br> <br> <br>
        Some text
        <br> <br> <br> <br> <br> <br>
    </p>
    <h2 class="sticky-paragraph">Sticky Postion</h1>
    <p>
        <br> <br> <br> <br> <br> <br>
        Some text
        <br> <br> <br> <br> <br> <br>
    </p>
    <h2 class="sticky-paragraph">Use of CSS Sticky Position</h1>
        <p>
            <br> <br> <br> <br> <br> <br>
            Some text
            <br> <br> <br> <br> <br> <br>
        </p>
</body>
</html>

Output:

We can witness in the output that the main heading and 2 paragraph headings are not moving when we scroll because they are sticky elements.

Illustration 4:

We will construct a sidebar and set it to the sticky position with the help of the CSS sticky position in this illustration.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration of sticky sidebar</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            font: bold;
            font-family: Georgia, Times, 'Times New Roman', serif;
            background-color: bisque;  
        }
        .sticky-sidebar {
            top: 0;
            padding: 25px;
            width: 150px;
            position: sticky;
            background-color: rgb(234, 168, 99);
        }
        .mainText {
            padding-bottom: 1000px;
        }
    </style>
</head>
<body>
    <div class="sticky-sidebar">
        <h2>Sidebar</h2>
        <ul>
            <li>
                <a href="#">Link to Page 1</a>
            </li>
            <li>
                <a href="#">Link to Page 2</a>
            </li>
            <li>
                <a href="#">Link to Page 3</a>
            </li>
            <li>
                <a href="#">Link to Page 4</a>
            </li>
            <li>
                <a href="#">Link to Page 5</a>
            </li>
            <li>
                <a href="#">Link to Page 6</a>
            </li>
        </ul>
    </div>
    <div class="mainText">
        <br> <br> <br> <br> <br> <br>
        <p>Some text</p>
    </div>
</body>
</html>

Output:

We can witness that the sidebar remains in the same place even after scrolling because it is set to the sticky position.

Browser Compatibility

The browsers that support the CSS sticky are given below:

Internet Explorer
Firefox
Safari
Google Chrome
Opera

Conclusion

We have comprehended the CSS sticky in this article. The CSS sticky is the value assigned to the CSS position property to make the HTML element stick to one place when it reaches its threshold.

Next TopicCSS background-clip

← prev next →