[CSS] CSS Position Sticky - How It works (with Examples)

---

Introduction

CSS has a very interesting property called position: sticky. This allows certain content to be stuck to the webpage.

Sometimes, you want your main navigation, such as Home, About Us, Contact Us, etc to be shown even after users scroll down.

Position sticky allows you to do that, so let's dive into the syntanx and the actual example!

---

Syntax:

.example {
    position: sticky;
    top: 0;
}

The syntax is quite easy. In the selector, you can write position: sticky; and that's all.

In this case, I set the top as 0, which will make the navigation stuck to the top of the web page.

---

Example:

.navbar {
    position: sticky;
    top: 0;
}

<nav class="navbar">
      <a href="">Menu1</a>
      <a href="">Menu2</a>
      <a href="">Menu3</a>
      <a href="">Menu4</a>
      <a href="">Menu5</a>
</nav>

This is before scrolling down.

Even after scrolling down, you can see that the Menus are stuck at the top.

Position Sticky property is interesting, and this will even enhance the user experience.

Give it a try!