Fixed two-column layout. Two-column layout (fixed sidebar and fluid content) How to make a div stick while scrolling

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

Unfortunately, Adsense rules prohibit us from doing this. However, many website owners ignore the rules at their own peril. Maybe they are not even punished for this, but I would not advise taking the risk.

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

Let's tell you how you can create a floating block on your website.

Task: make the last block in the side column (sidebar) floating. Moreover, so that it sticks only at the moment when the user reaches it by scrolling, and not immediately when opening the page. Also, the block should “stick” when reaching the footer (i.e., not overlap it).

The most working way

There are many options for implementing a sticky block, but not all of them work correctly. I'll tell you from personal experience: the same method of installing a block can work on one site, but jambs will appear on another.

Below is an example of a floating block that worked on almost all sites where I installed it. There were no jambs. The engine is also not important (DLE, WordPress, LiveStreet, etc.).

In the desired place in the side column, paste the following HTML code:

$(window).scroll(function() (
var sb_m = 20 ; /* padding above and below */
var mb = 300 ; / * basement height with margin */
var st = $(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 padding at the top, bottom, as well as the height of your footer, i.e. the height at which the block needs to stop.

Now let's connect JS. To do this, write in the HEAD section:

The easiest way (for WordPress)

Also a fail-safe method, but by installing a plugin. It works without jambs.

Advantages:

no need to understand/understand HTML;
simplicity and speed of installation.

Flaws:

not flexible. The entire widget (including its name and design) becomes floating. Let's say it will be difficult to make this block a different color or size.

How to use:

Download the plugin.

We install.

Let's activate it.

Go to the admin panel in the tab: Design -> Widgets. Open the widget that we want to make fixed.

Check the box next to “Fix widget” and click the “Save” button.

Other Ways to Implement Sliding Blocks

They seemed to me less convenient and not as clear as the two methods above. But I’ll tell you about them anyway.

Option #1 (without jQuery)

Insert into the sidebar:

We write styles in HTML (it’s better to add them directly to CSS):

.sticky(
position: fixed;
z-index: 101 ;
}
.stop(
position: relative;
z-index: 101 ;
}

Now we add the script itself to the page (it’s better to put it in separate file, as in “The most working method”):

(function() (
var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // if zero is replaced with a number, the block will stick before the top edge of the browser window reaches the top edge of the element. Can be a negative number
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
function Ascroll() (
if (b == null) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
for (var i = 0 ; i< Sa.length; i++) {
if (Sa[ i].indexOf("box-sizing" ) == 0 || Sa[ i].indexOf("overflow" ) == 0 || Sa[ i].indexOf("width" ) == 0 || Sa[ i].indexOf("padding" ) == 0 || Sa[ i].indexOf("border" ) == 0 || Sa[ i].indexOf("outline" ) == 0 || Sa[ i].indexOf("box-shadow" ) == 0 || Sa[ i].indexOf("background" ) == 0 ) (
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.children[ 0 ] ;
a.style .height = b.getBoundingClientRect() .height + "px" ;
a.style .padding = "0" ;
a.style .border = "0" ;
}
var Ra = a.getBoundingClientRect() ,
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // block selector, when reaching the top edge of which you need to unpin the sticky element; Math.round() is for IE only; if zero is replaced with a number, then the block will stick before the bottom edge of the element reaches the footer
if ((Ra.top - P) How to make a block (div, aside, etc.), header, advertisement, menu fixed. Only CSS #aside1 ( /* block that will remain in place */ position: fixed; z-index: 101; )

Actually, for most cases: floating buttons social networks, counters, no script required.

How to make a div stick while scrolling the page. Already a script

That is, the element with links (or whatever) is located far from the beginning of the page. Let's say a large header or side column contains many useful things, such as search, categories, etc. When while scrolling top part When the browser window touches the top edge of the element, it sticks and “travels” down to the end of the page.

.sticky ( position: fixed; top: 0 px; /* if zero is replaced with a number (and in the script too), then the block will stick before the top edge of the browser window reaches the top edge of the element. Can be a negative number. Let's use, for example, */ z-index: 101; ) (function())( // anonymous function (function())( ))() so that variables "a" and "b" do not become global var a = document.querySelector("#aside1 "), b = null; // block selector to pin // If function Askroll() ( if (b == null) ( // add a wrapper child to remove dependency on neighbors var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i< Sa.length; i++) { // if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) ( s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " ) ) b = document.createElement("div"); // create a child b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); // place the child in the clinging block first var l = a.childNodes.length; for (var i = 1; i< l; i++) { // move all other descendants to the newly created child (total: , inside which the scripts still work) b.appendChild(a.childNodes); ) a.style.height = b.getBoundingClientRect().height + "px"; // if there are other blocks under the sliding element, you can have your own value a.style.padding = "0"; a.style.border = "0"; // if the element is assigned or) if (a.getBoundingClientRect().top #aside1 > div:nth-child(3), #aside2 > div:nth-child(2) ")).forEach(function(a) ( // selectors of blocks that will be committed. There can be either one block or two or more var b = null, P = 0 ; window.addEventListener("scroll", Ascroll, false); document.body.addEventListener("scroll", Ascroll, false); function Ascroll() ( if (b == null) ( var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i< Sa.length; i++) { if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector("#article ").getBoundingClientRect().bottom + 0 ); if ((Ra.top - P) Array.prototype.slice.call(document.querySelectorAll("#aside1 div.stickyDa ")).forEach(function(a) { var b = null, P = 0 ; window.addEventListener("scroll", Ascroll, false); document.body.addEventListener("scroll", Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R = Math.round(Ra.top + b.getBoundingClientRect().height - a.parentNode.getBoundingClientRect().bottom + parseFloat(getComputedStyle(a.parentNode, "").paddingBottom.slice(0, -2))); if ((Ra.top - P) (function(){ var A0 = document.querySelector("#aside1 "), A1 = A0.querySelectorAll(".stickyDa "); Array.prototype.slice.call(A1).forEach(function(a, index) { var b = null, P = 0 ; window.addEventListener("scroll", Ascroll, false); document.body.addEventListener("scroll", Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ""), s = ""; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf("overflow") == 0 || Sa[i].indexOf("padding") == 0 || Sa[i].indexOf("border") == 0 || Sa[i].indexOf("outline") == 0 || Sa[i].indexOf("box-shadow") == 0 || Sa[i].indexOf("background") == 0) { s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i]) + "; " } } b = document.createElement("div"); b.style.cssText = s + " box-sizing: border-box; width: " + a.offsetWidth + "px;"; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes); } a.style.height = b.getBoundingClientRect().height + "px"; a.style.padding = "0"; a.style.border = "0"; } var Ra = a.getBoundingClientRect(), R, Rh = Ra.top + b.getBoundingClientRect().height; if (A1 != undefined) { R = Math.round(Rh - A1.getBoundingClientRect().top + 5 ); // distance between blocks so that floating elements are not pressed close to each other) else ( R = Math.round(Rh - A0.getBoundingClientRect().bottom + parseFloat(getComputedStyle(A0, "").paddingBottom.slice(0, -2))); ) if ((Ra.top - P ) W) ( if (Ra.top< K) { // scroll down if (R2 + N > R1) ( // don't reach the bottom if (Rb.bottom - W + N = 0) ( // pick up b.className = "sticky"; b.style.top = P + "px"; Z = Ra.top - P; ) else ( b.className = "stop"; b.style.top = - Z + "px"; ) ) else ( b.className = ""; b.style.top = ""; Z = 0; ) ) K = Ra.top; ) else ( if ((Ra.top - P)

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

Fixed two-column layout. Two-column layout (fixed sidebar and fluid content) How to make a div stick while scrolling

We are in social networks

Categories