Make a fixed menu when scrolling the page. Fixed menu when scrolling the page. How to Fix the Top Menu in WordPress

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 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.

Hello, dear readers of the blog site. This is more of a note to myself, so as not to forget what exactly I did when I want to return everything back. It all started when one of the readers suggested writing about a plugin for WordPress called Q2W3 Fixed Widget (Sticky Widget), which can make any widget in the sidebar floating or, in other words, fixed.

Those. As you scroll the page, you will see that the main part of the sidebar will go up, but the widget that will be located at the very bottom will remain in the viewing area no matter how far you move down the text. I’ll say right away what to post contextual advertising this is prohibited and can be punished for it (as it turned out in the comments - YAN allows this, but Adsense prohibits doing this).

The plugin is great, but widgets are disabled in my theme, so I decided this task using a few lines of JavaScript code that I found on the Internet.

As a result, my top menu is fixed at the very top of the viewport (in fact, only CSS code was enough for this, but we are not looking for easy ways), and Bottom part The sidebar is fixed at the top right of the screen when you reach it while scrolling the page. I don’t know whether this will be of any use, but the solution is really simple.

Why fix the menu and make a floating sidebar?

Why fix the top menu, you ask? Well, in general, this is a small experiment on the topic of improvement. Purely hypothetically, we can assume that this could cause an increase in the number of pages viewed and the time spent by the user on the site.

On the other hand, the excessive intrusiveness of such a fixed panel may cause a negative reaction from readers, so the question of the usefulness of this action remains open. You'll have to look at the result after a week of use - if the menu is no longer fixed (nailed to the top edge of the viewing area), then the experiment was a failure. Just in case, I'll take a screenshot of how it all happened.

A floating sidebar in WordPress is made for a slightly different reason - to attract more attention to something. In principle, here you can insert both a list of categories and a list of popular or recent posts, which again will try to serve the task of improving behavioral ones. But most often, advertising is placed in such a floating block (contextual advertising is not allowed, as I already mentioned), which, purely hypothetically, should increase the webmaster’s income. Let's see the result in a week.

How to Fix the Top Menu in WordPress

I found a solution for myself on this page - how to fix a block or menu on a website. For use this method must be connected jQuery library. How to do this was described in detail in the article about loading content.

If you remember, in the article about optimizing page loading speed, you need to try to combine all CSS and JS into one common one (in the sense of two - one for styles and the other for scripts). So, in fact, I added the lines of code given just below to such a file. Although you can add them directly to HTML code, surrounded by script tags. For example, this can be done in the header.php template inside the head tags.

You can also fix the top menu using pure CSS- to help us. Actually, positioning is also used here using this CSS properties, but it also becomes possible to start displaying a fixed menu not immediately, but some time after the scrolling starts (at a certain distance from the top).

In my case, the code for fixing the top menu looks like this:

$(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Let me remind you that you can paste this piece of code into:

  • A file with the .js extension that lives in the folder with the theme you are using (/wp-content/themes/theme). It is suitable for you only if a line is written for it in the header.php file for loading it along with the web pages of your site, which may look like this:
  • You can use the header.php file itself, concluding this code between the opening and closing head tags and wrapping it in script tags, for example like this: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • You can also write this code in script tags in any other place. The main thing is that it loads on the right pages blog. For example, you can do it in footer.php before the closing body tag.

    • Now let's look directly at this code. It turns out that 10 pixels from the top relative positioning is replaced by a fixed one (see the article at the link given just above). If necessary, in the line with else you can select non-zero as the value for top, and then the menu fixed at the top will recede from the top edge of the viewport by given value pixels (in my opinion, this is unnecessary).

    Unlike the original code, I also had to add width: "100%", because otherwise the menu size would decrease in width, which would spoil the whole picture.

    Look, for clarity, I will provide the Html code with which the top menu is formed in my WordPress template blog (it lives in my header.php file from ):

    In your template, most likely, the display of menu items will be specified using, for example, such a construction (function), but this is not important.