In this tutorial, I am going to show you how to design Fixed Menu Bar On Top When Scrolled Using jQuery. Fix menu bar is a smart designing system. Much high profile websites use this. If you do not know what is fix menu bar you should know about it. Fix menu bar is a designing system when a user scroll down web page then fixed menu after scroll at the top of this page. It helps to accelerate page visit for a website and motivate a user to visit another page. We say that fixed menu bar on scroll is a part of modern design.
How to create Fixed Menu Bar?
We can create this using HTML, CSS, jQuery And this is pretty easy like Animated Scroll To Top Using jQuery. We have created this already and we are using this on our website. for an example scroll down this webpage, you will see our menu will fix at the top of the page. We used it. Let's see how to create this. We are gonna to create a working demo for it. Follow my step by step directions.
Step-1 Create Style For Menu
We are going to create our necessary styles for the menu. Create a directory name as assets and create a styles.css file into assets directory. Write down these CSS codes into the style.css file.
Our index file ready. when you use this in your webpage then you need to scroll down at least 150px to see the result. This Scrolling fix will work when your webpage will scroll down 150px or more from the top of page. Make a working demo you should do that. You can use this you custom pages as you want. We have added a demo link and you will see the fixed menu bar on scroll example and can easily guese how this works. We also attached source code with this article, You can download and see the instant demo. We have added some text and images in our demo file and you can change these when you use this. You are free to edit and use this fixed menu. I hope you understand it and this is helpful for you. If you have any question or comment about jQuery Fixed Menu Bar article please don't hesitate to do that, please comment your question in comment section.