How to Add a CSS and JavaScript Sticky Menu, PLUS 7 Beautiful Examples

CSS and JavaScript Sticky Menus are popping up everywhere. The most popular pattern is a horizontal menu that conditionally “sticks” to the viewport, only when the reader begins to scroll past the menu vertically. The advantage of such a pattern is easy to see- by only becoming fixed when needed, it minimizes the intrusiveness of the menu.

There are two ways to go about adding a Sticky Menu to your site:

Sticky Menu using the new CSS `position:sticky` property

This is the easiest and preferred way to add a sticky menu to your site moving forward:

<br />

By adding a position:sticky to your menu container, it instantly behaves like a conditional sticky menu, automatically becoming fixed whenever the element begins to disappear from the viewport, usually due to user scrolling.

The specification for position:sticky calls for the target element to meet the following conditions:

Element should have an explicit top, left, bottom, or right property defined so the browser knows how to position the element when it’s sticky. Without it the element will behave like a regular relatively positioned element.
Element should not have overflow:hidden or auto defined (though from my testing this doesn’t seem to matter).

The main caveat of position:sticky is the lack of older browser support, most notably IE11 and below. However, IE Edge and all recent versions of Chrome and Firefox support this property, so depending on your required level of backwards support, this property may be all you need to instantly transform your existing site menu so it’s sticky.

Sticky Menu using CSS and JavaScript

The second, more conventional way to create a conditional sticky menu is to use JavaScript to implement the sticky logic. While this is more verbose, it does give you total control over the sticky behavior, such as replace the original menu entirely with a different one when the former is scrolled out of view.

The following examples uses JavaScript to detect when the target menu is about to disappear partially from the viewport, and add a CSS class of “sticky” to it to make it stick. The result looks and behaves almost identical to the pure CSS version above:

<br />

Here is the JavaScript code that realizes the sticky effect:

<script>

var stickymenu = document.getElementById("stickymenu")
var stickymenuoffset = stickymenu.offsetTop

window.addEventListener("scroll", function(e){
    requestAnimationFrame(function(){
        if (window.pageYOffset > stickymenuoffset){
            stickymenu.classList.add('sticky')
        }
        else{
            stickymenu.classList.remove('sticky')
        }
    })
})

</script>

Be careful when adding code inside window’s onscroll event, as it’s an expensive event to attach code to in terms of performance. This is why I’m using requestAnimationFrame() to invoke the code that adds or removes the “sticky” class, though there are a lot more optimizations you can do. An additional measure often employed is to use the setTimeout() method to throttle how often code inside the onscroll event gets fired.

Here are a couple of sticky menu scripts on Dynamic Drive:

7 Beautiful Sticky Menu Examples

Now that you’ve seen how a sticky menu is created, prepared to be inspired by these awesome examples of sticky menus out in the wild.

Aiven Fixed Menu

This classic horizontal sticky menu blends in well with its surroundings by default, though as the user scrolls, uses a high contrast white on black text to highlight its transformation into a fixed menu.

Lik Semi Transparent Sticky Menu

Similar to the sticky menu example above.

Nordiva Sticky Mega Menu

This sticky mega menu becomes fixed once the user starts scrolling down. The transparent background is a nice touch.

Original Territory Horizontal Sticky Menu

Gerald Slide Down Sticky Menu

Brit.co Upwards Fixed Menu

This menu By Brit.co disappears by default when you scroll downwards, only to become sticky whenever you scroll back up again. I’m seeing more and more of this play on the standard sticky menu pattern recently.

RXLive Sticky Scroll Menu

Are You ready to Transform your Site Menu?

With CSS position:sticky, modifying a regular horizontal menu to be conditionally fixed is now as easy as pie. And for those that need more control, using CSS and JavaScript together to build your own sticky logic is another option. Either way, you can now take advantage of this powerful pattern that combines the best of a inline menu with a fixed menu. Have fun with it!

Sticky Menu using the new CSS position:sticky property