What is Sticky Menu

Of all newly introduced technologies, sticky menu in html is very popular now. In case if you are wondering what is it, well, it is the same menu of your website but it never goes off the screen even when you scroll down. Sometimes the menu stays the same as it is and sometimes it shrinks down a bit, maybe the fonts are a bit smaller with smaller logos etc. In my opinion the menu looks awesome when it shrinks down a bit by size and with some transition with it.

Why Sticky Menu

Navigation menu is the heard of a website. Visitors use the menu to go to different pages or services with it. If your webpage is too long and let’s say a reader comes down a bit and now wants to go to the top of the website, he will need to scroll up all the way to the top. Why do such when you have a very simple solution, sticky menu. A sticky menu will not only make your website look good, it will also make it user friendly.

Process

The process of making a sticky menu is easy. We will need to add some css with html and a little bit of JavaScript code. So, the main thing is that I will work on the header tag. When the user scroll down the page the header will get an additional class. So all we need to do is to style those two different class the right way so that our header becomes sticky.

Coding for the sticky menu

HTML

Here I am using the header element and in my header, I don’t have much of anything. I just have an h1 tag that I am gonna work with. Basically, in a sticky menu there is navigation menu, site logo, some social links etc. As I am just demonstrating the topic, I hope this little example will be better to understand.

<header>
<h1>Sticky Header Example</h1>
</header>

JavaScript

Wondering why the JavaScript before css? Well, before working on the css, we will need to generate a class with JavaScript. This block of code is really simple.

<script>
	$(window).scroll(function(){
		if($(this).scrollTop() > 1){
			$('header').addClass("sticky");
		}

		else{
			$('header').removeClass("sticky");
		}
	});
</script>

From this block of code, you can tell whenever a user scroll down a bit the header will get an additional class called sticky. It’s simple, right? Of course it is.

CSS

Here we have a very small piece of css styles. This will be enough to demonstrate sticky menu.

*{
	margin: 0;
	padding: 0;
}

body{
	font-family: Segoe UI;
}

header{
	height: 100px;
	background-color: #3B5998;
	text-align: center;
	transition: all 0.5s ease;
}

header h1 {
    color: #fff;
    padding-top: 23px;
    transition: all 0.5s ease;
}

header.sticky{
	position: fixed;
	height: 60px;
	width: 100%
}

header.sticky h1{
	padding-top: 5px;
	transition: all 0.5s ease;
}

Okay, one more thing before running the index file, we need to call jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

So, that’s it, sticky menu done. It was easy, isn’t it? Go ahead and try yourself and let me know your thoughts on it.

I hope the process was easy. As always, I have recorded the full demonstration in a 11.46 min YouTube video to make it even better. Go ahead and watch it. Subscribe to the channel for more contents.
https://youtu.be/gcEc6fJxsrs