The left sidebar is fixed. Fixed floating sidebar. Initial variant when nothing floats

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 with the fact that 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 viewport no matter how far you move down the text. Let me state right away that place contextual advertising it is forbidden in this way and can be punished for this (as it turned out in the comments, YAN allows this, and Adsense forbids doing this).

The plugin is great, but widgets are disabled in my theme, so I solved this problem with a few lines of javascript code that I found on the Internet.

In the end my top menu 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), but the bottom of the sidebar is fixed at the top right of the screen when you reach it while scrolling the page. Whether this will be of any use I do not know, 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, it can be assumed that this can 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 can cause a negative reaction from readers, so the question of the usefulness of this action remains open. It will be necessary to look at the result after a week of use - if the menu ceases to be fixed (nailed to the top edge of the viewport), then the experiment failed. Just in case, I'll take a screenshot of how it all happened.

The floating sidebar in WordPress is done for a slightly different reason - to draw 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 income of the webmaster. Let's see the results in a week.

How to fix the top menu in WordPress

I found a solution for myself on the net. To use this method, the jQuery library must be included. How to do this, I described in detail in the article about loading content.

If you remember, in an article about optimizing page loading speed, you should try to combine all CSS and JS into one common one (in the sense of two - one for styles and the other for scripts). Here, in fact, I added the following lines of code to such a file. Although you can add them directly to the Html code, surrounding them with script tags. For example, this can be done in the header.php template inside the head tags.

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

In my case top menu commit code 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"}); }); });

I remind you that you can paste this code snippet into:

1. A .js file that lives in the folder with the theme you are using (/wp-content/themes/theme). It will suit you only if for it in the header.php file there is a line for loading it along with the web pages of your site, which may look like this:
2. You can use the header.php file itself by enclosing this code between the opening and closing head tags and wrapping it in script tags, like so:
3. You can also write this code in script tags anywhere else. The main thing is that it loads on the right pages of the blog. For example, you can in footer.php before the closing body tag.

Now let's go directly to this code. It turns out that after 10 pixels from the top, the relative positioning is replaced by a fixed one (see the article at the link above). If necessary, in the line with else, you can choose a value for top not zero, and then the menu fixed at the top will indent from the top edge of the viewport by this pixel value (in my opinion, this is superfluous).

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

Look, for clarity, I will give the Html code that forms the top menu in my WordPress blog template (it lives in my header.php file from ):

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

The wp_list_pages function is, of course, good (it allows you to customize sorting, set exceptions, etc.), but it's better to do everything manually through plain Html, as shown above. IMHO.

It is important to grasp here that the whole matter is concluded into container divs, and the topmost one has an id="navi" attribute. Here we will cling to it. You see in the above JS code it occurs twice #navi? You will need to put down your ID there instead of #navi (or a class, which, as you remember, is written not through a hash, but through a dot, for example, like this: .menu).

After that, your menu should be fixed in the top position when scrolling the page by a certain number of pixels. However, I had a problem with the fact that this very menu did not always appear on top of the page elements over which it floated.

This, you see, is not good. Therefore, I had to get a bit into the CSS code and add with a value of 1000 for the id of the #navi selector:

#navi(background:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000 )

The fact is that when you set one of the three types of positioning using Position, then this element ceases to interact with the usual elements of the Html code. But with other similarly positioned ones, it will compete for the “above or below” position. z-index:1000 allows us to place our menu obviously above all other blocks. Read the article above for details.

How to make a floating sidebar in WordPress without plugins

Using the method described below, you can make the whole sidebar or part of it float (or in other words, fix in a certain place in the viewport). If this area is quite small and fits on one screen (even a portable device), then you can make it all float.

But most often this will not be the case, and it will be possible to force the lower part to float. If the sidebar, as in my case, is an inseparable monolith, then you can create a floating block yourself, using the principles laid down in the design theme you use, and place it below the main one.

I did all this quickly and without really bothering myself with frills and finding the optimal solution, because from my rich experience of experiments I learned the pattern that the more you place hopes on some idea, the less likely it is to “shoot”. Well, vice versa. In general, there was no point in bothering yet, because the likelihood that all this will take root is not so great.

So I just took to create the bottom block I moved the upper part of my main sidebar (in the sidebar.php template), then moved it from the top to the bottom block “I use it for making money”, and at the end I stuck what was the end in the main block. It turned out something like this:

Well, now I have the “I use for earnings” block moved from the top block of the sidebar to the bottom one. It turned out not a fountain, but for a "temporary" it will do. It remains only to arrange all this in a JS file with code and the lower block will begin to float. JS code looks like this:

$(document).ready(function()( var br = $.browser; $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(".sidebar123").css((top: "52px", position: "fixed", marginLeft: "760px")); ) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Note that instead of .sidebar123 , you need to substitute your class or the ID of the outer container in which your sidebar bottom block lives.

I don’t understand this code very well (I don’t know JS), but everything works. At least partially. When you set fixed positioning, the report is from the top left point. Therefore, with marginLeft: "760px" I place this block exactly at the level of the sidebar (the number was obtained through "trial and error").

The value top: "52px" sets the padding of the already floating sidebar block from the top border. The value of top However, I have there was a problem in the event that the total height of the main sidebar was less than the height of the content area. Such a thing got out, for example, when viewing the archive of headings:

From a CSS point of view, I understand why this happens, but I was too lazy to think about a fix. I just had to refuse to show this floating sidebar block on such pages (it is not needed there).