Examples

CSS Sticky Header

Creating a Sticky Header

CSS sticky header uses position: sticky for fixed navigation.

Introduction to CSS Sticky Header

A CSS sticky header is a navigation bar that remains fixed at the top of the page while scrolling. This effect can be achieved using the position: sticky property. Unlike position: fixed, which pins an element to the viewport, position: sticky allows an element to toggle between relative and fixed positioning, depending on the user's scroll position.

Basic Example of a Sticky Header

Let's start with a simple example to understand how a CSS sticky header works. In this example, we will create a header that becomes sticky when you scroll past it.

How It Works

In the above example, the header element has a position: sticky property with a top value set to 0. This means the header will stick to the top of the viewport when its top edge reaches the specified top position. The z-index is used to ensure that the header stays on top of other content.

Sticky Header with JavaScript Fallback

For browsers that do not support position: sticky, you can use JavaScript to achieve a similar effect. Here's how you can implement a sticky header using JavaScript.

Conclusion

Using position: sticky allows you to create a sticky header with minimal code and no need for JavaScript. However, if you need to support older browsers, a JavaScript fallback is a great option. By using these techniques, you can enhance the navigation experience on your website.

Examples

Previous: Flex Layout
Next: Animated Button