• Skip to content
  • Skip to primary sidebar

Dynamic Drive Blog

  • JavaScript
  • CSS Library
  • Help Forums
  • Tools
Home / CSS / How to Add a CSS and JavaScript Sticky Menu, PLUS 7 Beautiful Examples

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

March 22, 2018 by Dynamic Drive

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:

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.

CSS Position Sticky Browser Support

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:

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:

  • Sticky Horizontal Menu
  • Sticky Content script

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.

Aiven CSS Fixed Menu Example

Lik Semi Transparent Sticky Menu

Similar to the sticky menu example above.Like Semi Transparent Sticky Menu

Nordiva Sticky Mega Menu

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

Nordiva Sticky Menu Example

Original Territory Horizontal Sticky Menu

Original Territory Horizontal Sticky Menu Example

Gerald Slide Down Sticky Menu

 

Gerald Slide Down Sticky Menu Example

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.

Brit.co Upwards Fixed Menu Example

RXLive Sticky Scroll Menu

RSLive Scrolling Sticky Menu Example

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!

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to email this to a friend (Opens in new window)

Filed Under: CSS, JavaScript

Reader Interactions

Primary Sidebar

Featured Posts

  • Best Wordpress Theme Clubs and BundlesBest WordPress Theme Clubs That Offer Multiple The…
  • 7 Wordpress and Web Design Trends for 20187 WordPress and Web Design Trends to Watch in 2018
  • Add Custom JavaScript and CSS to WordPress
  • Best Wordpress Page Builders Compared and ReviewedBest WordPress Page Builders Compared and Reviewed
  • WordPress Genesis: Showing a different Featured Im…

Categories

  • CSS
  • Entrepreneurs
  • JavaScript
  • Plugins
  • Site News
  • Software
  • Web Building
  • Web Design
  • Wordpress
  • RSS Feeds
  • Twitter
  • Facebook
  • FAQs
  • Free Newsletter
  • Usage Terms
  • Contact
Affiliate Disclaimer: I earn a commission from some products mentioned. All opinions are my own. Copyright 2018 Dynamic Drive [ Top ]
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.