Fixed floating sidebar. Fixed two-column layout Fixed sidebar

Interestingly, the block that remains in one place when scrolling is called: "moving", "floating", "moving", "mobile", "sliding". And in fact he "stuck", "fixed", "fixed" and located on a certain area of ​​the monitor screen, regardless of the degree of scrolling of the web page.

Initial variant when nothing floats

Initial data: the block is already positioned. I have something like this with a large footer, you have it differently.

How to make a block (div, aside, etc.), header, ad, menu fixed. Only CSS

A floating block that freezes over a footer or other element. Pure JavaScript without jQuery

So that the floating block does not disappear, does not go to the footer of the site, but stops above the specified element.

Element sticks only while scrolling through another element

To make the element unhook and stop when the article field ends. That is, the bottom borders of article and aside must be on the same line.

How to make two (optional) blocks stick in both sidebars

Two or more blocks are fixed one after another

When scrolling down, the first block sticks, when the parent ends, it unsticks; the second one sticks, when the parent ends, it comes off; the third sticks, and so on.

The same thing, only with a common parent.

Floating long sidebar without white space

When scrolling down, the sidebar sticks when its bottom edge touches the bottom edge of the browser window. When scrolling up, the sidebar sticks when its top edge touches the top edge of the browser window. There is a lower limit that the column reaches.

A floating block (or as it is also called moving, fixed, stuck) is needed on the site so that the user sees one fixed element when scrolling the page, in which advertising is most often placed (teasers, banners or context).

Alas, the rules of adsense forbid us this. However, many site owners ignore the rules at their own risk. Maybe they are not even punished for this, but I would not advise taking risks.

I place YAN, my teasers / banners in such blocks, and sometimes, instead of advertising, I display similar posts or some useful information for the visitor.

Let's tell you how you can make a floating block on your site.

A task: make the last block in the sidebar (sidebar) floating. Moreover, so that it sticks only at the moment when the user reaches it by scrolling, and not immediately when the page is opened. Also, the block should “stick off”, reaching the footer (i.e. not overlapping it).

The most working way

There are many implementations of the sticky block, but not all of them work correctly. I’ll tell you from personal experience: the same block installation method can work on one site, and jambs will appear on another.

Below is an example of a floating block that has worked on almost every site I've installed it on. There were no goats. The engine is also not important (DLE, WordPress, LiveStreet, etc.).

Paste the following HTML code in the desired location of the sidebar:

$(window).scroll(function() (
var sb_m = 20 ; /* top and bottom padding */
var mb = 300 ; /* basement height with margin */
varst = $(window).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height () ;

If(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : h) ) ;
}
else(
sb.css(( "paddingTop" : 0 ) ) ;
}
}
} ) ;

In this code, you can set the top, bottom, and height of your footer, i.e. the height at which the block should stop.

Now we include JS. To do this, write in the HEAD section:

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:

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 other than zero for top, 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 configure 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, 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).