Sticky Navigation Menu

Sticky navigation menus are useful when you have lots of content and pages. Many modern websites have already implement it differently.By having it, you can easily navigate to a different page of the website. There are two types of sticky navigation menus – always sticky and when you scroll you get it sticky. The key is to add position: fixed and top: 0 in your header or navigation menu.

The menu you are about to implement will be when you scroll 300px down of your page.

HTML

<header id="masthead" class="site-header">
<div class="container"><nav id="site-navigation" class="main-navigation">
<div class="menu-navigation-menu-container">
<ul id="menu-navigation-menu" class="menu">
	<li><a href="http://ageorgiev.com/">Home</a></li>
	<li><a href="http://ageorgiev.com/portfolio/">Portfolio</a></li>
	<li><a href="http://ageorgiev.com/gallery/">Gallery</a></li>
	<li><a href="http://ageorgiev.com/testimonial/">Testimonials</a></li>
	<li><a href="http://ageorgiev.com/blog/">Blog</a></li>
	<li><a href="http://ageorgiev.com/#about">About</a></li>
	<li><a href="http://ageorgiev.com/#contact">Contact</a></li>
</ul>
</div>
</nav></div>
</header>

CSS

If you want always sticky just add position: fixed to .site-header and completely remove .site-header.smaller
As you can see I have added a nice transition, because our navigation will be a bit smaller than the original one.

.site-header {
    width: 100%;
    height: 75px;
    background: rgba(255, 255, 255, .97);
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
    position: relative;
    z-index: 98;
}
.site-header.smaller {
    height: 55px;
    position: fixed;
    top: 0;
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.main-navigation {
    float: left;
    height: 75px;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-navigation ul li {
    display: inline-block;
    margin-right: 1.78571em;
    position: relative;
    vertical-align: middle;
    line-height: 75px;
}

jQuery

With few lines of jQuery, we just say that when the user scrolls 300px our header (#masthead) will add a class smaller, when scroll back to top the class will be removed.

    $(window).scroll(function() {
        if ($(window).scrollTop() > 300) {
            $('#masthead').addClass('smaller');
        } else {
            $('#masthead').removeClass('smaller');
        }
    });

Always Sticky Navigation

If you prefer to your navigation to be always sticky without the feature scroll, just add in the CSS position: fixed to your header. Do not change the HTML and remove the jQuery.

What do you think is there a better or easier way to do it? Share in the comments below.