Sticky Menu Bar code and example

Sticky Menu Bar

This is a bit of a feature a lot of websites use and love, which is the Sticky Menu Bar. This could also be used for things like a cookie policy bar as well, but what ever the use it is a good feature. However I see some people add these with some terrible code and methods, because they don’t understand how it would work. I will explain my method and why I think it is better.

Although it is all done via JavaScript and JQuery, we will start with the HTML. This is sort of simple that you can have what ever you like, but you need the navigation wrapped in a container. For my example I have the HTML5 ‘nav’ element as my container and then the actual navigation as an Unordered List.

<nav >
<ul >


<!--ul>

This will be explained further on, but the reason for this is so your content does jump.

For the CSS it is pretty much just standard styling more for the benefit of the visual of the navigation, not for the functionality. The ‘nav’ has colour, the ‘ul’ removes the bullet points and then the final styling to bring the link containers inline.

nav {
background-color: #0073AA;
}

ul {
list-style: none;
}

li {
display: inline-block;
color: white;
padding: 10px 0;
}

Then is the JavaScript/JQuery that I have done in a prototype, so that it can be added once then used however many times. The basics to set this up is the initialisation method and the defaults object added to the prototype.

The ‘defaults’ contain 3 parameters that are the ‘itemClass’ the class given to the navigation controller for my example the ‘ul’, the ‘itemParent’ the class given to the parent of the navigation the ‘nav’ and finally the ‘stickyClass’ which is the class given to the item once it has stuck to the top of the screen. This is so if you want to style it different once it has stuck. The defaults, mean if you don’t want your own classes then there are back up classes instead.

StickyBar.prototype = {
defaults: {
itemClass: "sticky_item",
itemParent: "sticky_parent",
stickyClass: "sticky_class"
},
init: function() {
}
}

You also have a ‘init’ method attached. This is where we action the method to run the functionally of the navigation. This is below and starts off with putting the object into a scope called ‘base’. This give the ‘this’ the scope of the method.

We then have the on scroll attribute of JQuery to read each time the user scrolls, you can tell where they are. Next I have put in the ‘each’ attribute so if you have multiple sticky bars with the same class, they are all picked up and checked. You can have multiple sticky bars, as the position of these are done in the CSS, so as long as you have a different class on each for their direction then you can have more than one.

Within here is the real thinking. With the if command we check if the scroll position of the window is further down the page then the navigation. This is the reason we have the navigation container, as once you have stuck the navigation to the page it moves with the page and therefore the window will never scroll back over it. With the container you can stick the content inside and then use the container as the reference point.

If it is to be stuck then we add some inline CSS to position fix it to the window and add the sticky class to the navigation. If it is not to be stuck then it does the opposite. There is also a bit of functionality to give the parent element some height, because once you stick the navigation it is not relative on the page so all the content will shift up. Instead we add the height on as a placeholder. I have added it here, so that if your item change for instance a drop down menu or you also have multiple stick bars, then it works for all.

startScroll: function() {
var base = this;
$(window).scroll(function() {
$(base.itemClass).each(function() {
if ($(window).scrollTop() >= $(this).parent(base.itemParent).offset().top) {
$(this).css({
'position': 'fixed'
})
$(this).addClass("stickyClass");
$(this).parent(base.itemParent).css({
'height': $(this).height()
});
} else {
$(this).css({
'position': 'relative'
});
$(this).removeClass("stickyClass");
$(this).parent(base.itemParent).css({
'height':'auto'
});
}
})
})
}

Once last thing we need to do is add it to the ‘init’ method and it is complete. Please also notice the object StickyBar that sets the each sticky bar and the IFFY around everything to run this on load.

All you then need to do to initialize each instance is call the object and add in the optional parameters, which again I have put in an IFFY to have it load straight away.

//New Sticky
(function() {
var stickyBar = new StickyBar({
itemClass: '.nav_bar',
itemParent: '.nav_bar_parent',
stickyClass: 'nav_bar_stuck'
});
})();

Please see the full code and an example on CodePen

Advertisements

Leave a message please

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s