Very often, on sites with a lot of content, the visitor gets lost on the page and has to scroll to the very top of the page to find the navigation menu. Technologies do not stand still, monitor screens and their resolutions are becoming larger, so now on a website it is no longer a pity to allocate 40 pixels on top for a fixed menu when scrolling a website page. The visitor will be able to always see which section he is in, as well as have quick access to the navigation menu. Ultimately, this increases the depth of browsing the site :)

What is the essence of a fixed navigation menu on a website? Initially, our menu is located in its usual place, somewhere in the header, in my case at a distance of 140px from the top edge. As soon as the visitor scrolls the page by these same 140px at the bottom, the menu is fixed at the very top of the window and remains there for the rest of the time until the scroll is returned to the top position.

A fixed menu when scrolling a page is essentially a control panel that is always with you. Our menu will be simple.

From theory to practice. Everything is quite simple and minimalistic, most of which is given to styles that you can customize for yourself. I made a fixed menu as in the picture; when scrolled, the color of the menu becomes slightly transparent so that it does not look heavy and the content underneath is visible.

• Bags
• Shoes
• Scarves
• Cloth
• Accessories

Our styles. I have a menu with a width of 1180px, located in the center. The header is 180px high, the scrolling menu is included in it and takes up 40px. This means the distance from the top 140px. Let's remember this number)

#header ( height: 180px; ) #navigation( background: #EF0505; height: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px; position: relative; top: 140px; ) #navigation.fixed( position: fixed; top: 0; width: 100%; background: rgba(239, 5, 5, 0.95); ) #navigation ul( width: 1180px; padding -left: 0; margin: 0 auto; display: block; ) #menu li( float: left; list-style: none; padding: 0 25px; border-right: 1px solid #D60000; ) #menu a ( color: #fff; text-decoration: none; font-family: Verdana; ) #menu>li a:hover( color: #656565; transition: color 0.5s ease; )

And here are the few lines of code that work the magic) We set the conditions for scrolling the page, above 140px or below. Depending on this, the fixed class is assigned to our navigation menu. And with this class, as stated above, we make the menu fixed and pinned to the top.

JQuery(function($) ( $(window).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else if ($(this).scrollTop()

Please note that if there are single quotes in the code enclosed in echo "" , they will need to be escaped, i.e. put a backslash (\") in front of each of them, without parentheses, of course.

In general, it turned out as it turned out. You will have to decide for yourself how to specifically attach this to your topic - when you have time, it’s even fun to “rack your brain.” Thank you.

Good luck to you! See you soon on the pages of the blog site

You might be interested

WebPoint PRO is a responsive WordPress theme with wide functionality and competent technical search engine optimization
Share42 - a script for adding social networking buttons and bookmarks to the site (there is a floating panel option)

Which are found more and more often on the pages of blogs and other resources. The use of such navigation bars is quite justified. One of the main reasons for the active use of these jQuery plugins is that the menu is always at the visitor's fingertips, even if it is at the bottom of the page. In addition, a fixed menu takes up little space and does not distract attention from the main content. Generally speaking, a fixed menu improves the usability of the site.
I have put together a collection of the best, in my opinion, free jQuery plugins for implementing a fixed menu. I tried to ensure that each of the plugins was unique in some way, so that any plugin from the selection could be used specifically in your project. In the collection you can find both simple and more complex plugins with animation, etc.
If you need a very simple fixed menu, something like how we implemented a sticky panel with social buttons, you can do without jQuery plugins, because loading the page with scripts is not very good, but we will talk about this in the following articles . Subscribe to our channel or pages so as not to miss interesting materials.
So. Here are 6 jQuery plugins for creating a fixed menu.

Auto-Hide Sticky HeaderjQuery fixed navigation plugin, which works on a similar principle as the script above, but less smooth, although, at first glance, a little easier. Unfortunately, I can’t say that the navigation is fully adaptive, since on small screens the menu items become just numbers, which is very strange.

On Scroll Header EffectsPowerful jQuery plugin for fixed navigation bar. You can set certain segments on the page when scrolling, upon reaching which the panel transforms and can completely change its appearance. There can be any number of such segments on a page.

On-Scroll Animated Header A good plugin to implement a sticky navigation bar. It works like this: at the very beginning of the page, we see a tall header containing the logo and menu. When scrolling, the header area with all elements, including the logo and navigation, smoothly decreases using properties and becomes a narrow strip stuck to the top of the screen.