Bitrix fix sidofältsbannerändring php. Fast layout med två kolumner

Det enklaste exemplet på en fast flytande sidofält i HTML+CSS+JS.

Vad är dess egenhet - när du rullar fastnar sidofältet på toppen av fönstret, men samtidigt, när sidofältet rullar till sidfoten, kommer det från toppen av skärmen och fastnar på sitt eget botten till sidfoten, och överlappar därmed inte sidfoten (sidfoten måste vara hög). Om du vet vad jag menar.

Exemplet togs från någon sida och det är mycket primitivt (och moraliskt föråldrat), lämpligt endast för denna layout. Mer universell kod finns i den här artikeln och du kan redan skriva din egen kod för ditt projekt.

HTML-uppmärkning för en enkel sida

CSS-stilar för innehållsblock

.header ( bredd: 100 %; bakgrund: lila; höjd: 80 px; ) .content ( bredd: 80 %; bakgrund: blå; höjd: 800 px; flytande: vänster; ) .sidebar ( bredd: 20 %; bakgrund: grön; höjd: 100px; float: höger; ) .sidebar.fixed (position: fast; höger: 50%; marginal-höger: -50%; ) .sidfot (bredd: 100%; bakgrund: grå; höjd: 500px; tydlig: båda ;)

JS-skript för fast sidofält på sidrullning

Glöm inte att inkludera jQuery

$(function() ( var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() ; var $footer = $(".footer"); var $footerTop = $footer.position().top; $window.scroll(function(event) ( $sidebar.addClass("fixed"); var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); if ($scrollTop + $sidebarHeight > $footerTop) ( var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight); ) $sidebar.css("top", $topPosition); )); ));

Ett flytande block (eller som det också kallas moving, fixed, stuck) behövs på sajten för att användaren ska se ett fast element när man rullar på sidan, i vilken reklam oftast placeras (teasers, banners eller sammanhang).

Tyvärr, reglerna för adsense förbjuder oss detta. Men många webbplatsägare ignorerar reglerna på egen risk. Kanske blir de inte ens straffade för detta, men jag skulle inte råda dig att ta risker.

Jag placerar YAN, mina teasers/banners i sådana block, och ibland, istället för att annonsera, visar jag liknande inlägg eller någon användbar information för besökaren.

Låt oss berätta hur du kan skapa ett flytande block på din webbplats.

Uppgift: gör det sista blocket i sidofältet (sidofältet) flytande. Dessutom så att den bara fastnar i det ögonblick då användaren når den genom att rulla, och inte direkt när sidan öppnas. Blocket ska också "sticka av" och nå sidfoten (dvs. inte överlappa den).

Det mest fungerande sättet

Det finns många implementeringar av det klibbiga blocket, men alla fungerar inte korrekt. Jag ska berätta för dig från personlig erfarenhet: samma blockinstallationsmetod kan fungera på en plats, och jambs kommer att dyka upp på en annan.

Nedan är ett exempel på ett flytande block som har fungerat på nästan alla sajter jag har installerat det på. Det fanns inga getter. Motorn är inte heller viktig (DLE, WordPress, LiveStreet, etc.).

Klistra in följande HTML-kod på önskad plats i sidofältet:

$(window).scroll(function() (
var sb_m = 20; /* topp- och bottenstoppning */
var mb = 300; /* källarhöjd med marginal */
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) );
}
annan(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

I den här koden kan du ställa in toppen, botten och höjden på din sidfot, dvs. höjden vid vilken blocket ska stanna.

Nu inkluderar vi JS. För att göra detta, skriv i avsnittet HEAD:

Du kan använda själva filen header.php genom att omsluta den här koden mellan den inledande och avslutande head-taggen och linda in den i skripttaggar, så här:

Du kan också skriva den här koden i skripttaggar någon annanstans. Huvudsaken är att den laddas på rätt sidor på bloggen. Till exempel kan du i footer.php före den avslutande body-taggen.

Låt oss nu gå direkt till den här koden. Det visar sig att efter 10 pixlar från toppen ersätts den relativa positioneringen av en fast (se artikeln på länken ovan). Om det behövs, i linje med else, kan du välja ett värde för topp inte noll, och sedan kommer menyn som är fixerad längst upp att dra in från den övre kanten av viewporten med detta pixelvärde (enligt min mening är detta överflödigt).

Till skillnad från originalkoden var jag också tvungen att lägga till bredd: "100%", för annars skulle storleken på menyn i bredd minska, vilket förstörde hela bilden.

Titta, för tydlighetens skull kommer jag att ge HTML-koden som utgör toppmenyn i min WordPress-bloggmall (den finns i min header.php-fil från ):

I din mall kommer troligen utdata från menyalternativ att ställas in med hjälp av till exempel en sådan konstruktion (funktion), men det är inte meningen.

Funktionen wp_list_pages är naturligtvis bra (den låter dig anpassa sortering, ställa in undantag etc.), men det är bättre att göra allt manuellt genom vanlig HTML, som visas ovan. IMHO.

Det är viktigt att förstå att hela ärendet är avslutat i container divs och den översta har ett id="navi"-attribut. Här kommer vi att hålla fast vid det. Du ser i ovanstående JS-kod att det förekommer två gånger #navi? Du kommer att behöva lägga ner ditt ID där istället för #navi (eller en klass, som, som du minns, inte är skriven genom en hash, utan genom en punkt, till exempel, så här: .menu).

Därefter bör din meny vara fixerad i översta positionen när du rullar sidan med ett visst antal pixlar. Jag hade dock ett problem med att just den här menyn inte alltid dök upp överst på sidelementen som den flöt över.

Det här, ser du, är inte bra. Därför var jag tvungen att gå in lite i CSS-koden och lägga till med ett värde på 1000 för id för #navi-väljaren:

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

Faktum är att när du ställer in en av de tre typerna av positionering med Position, så slutar detta element att interagera med de vanliga elementen i HTML-koden. Men med andra liknande positionerade kommer den att tävla om positionen "över eller under". z-index:1000 låter oss placera vår meny uppenbart över alla andra block. Läs artikeln ovan för detaljer.

Hur man gör en flytande sidofält i WordPress utan plugins

Med hjälp av metoden som beskrivs nedan kan du få hela sidofältet eller en del av det att flyta (eller med andra ord, fixa på en viss plats i visningsporten). Om det här området är ganska litet och passar på en skärm (även en bärbar enhet), kan du få det hela att flyta.

Men oftast kommer detta inte att vara fallet, och det kommer att vara möjligt att tvinga den nedre delen att flyta. Om sidofältet, som i mitt fall, är en oskiljaktig monolit, kan du skapa ett flytande block själv, med hjälp av principerna som anges i designtema du använder, och placera det under det huvudsakliga.

Jag gjorde allt detta snabbt och utan att egentligen störa mig med krusiduller och hitta den optimala lösningen, för från min rika erfarenhet av experiment lärde jag mig mönstret att ju mer man sätter förhoppningar på någon idé, desto mindre sannolikt är det att "skjuta". Tja, vice versa. I allmänhet var det ingen idé att bry sig ännu, eftersom sannolikheten att allt detta ska slå rot är inte så stor.

Så jag tog bara för att skapa det nedre blocket Jag flyttade den övre delen av min huvudsidofält (i mallen sidebar.php), flyttade den sedan från toppen till det nedre blocket "Jag använder det för att tjäna pengar", och i slutet fastnade jag vad som var slutet i huvudet blockera. Det blev ungefär så här:

Nåväl, nu har jag flyttat blocket "Jag använder för inkomster" från det övre blocket i sidofältet till det nedre. Det visade sig inte en fontän, men för en "tillfällig" kommer det att göra. Det återstår bara att ordna allt detta i en JS-fil med kod och det nedre blocket kommer att börja flyta. JS-koden ser ut så här:

$(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((överst: "52px", position: "fixed", marginLeft: "760px")); ) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Observera att istället för .sidebar123 måste du byta ut din klass eller ID:t för den yttre behållaren där ditt sidofälts nedre block finns.

Jag förstår inte den här koden så bra (jag vet inte JS), men allt fungerar. Åtminstone delvis. När du ställer in fast positionering är rapporten från den övre vänstra punkten. Därför, med marginLeft: "760px" placerar jag detta block exakt på nivån för sidofältet (numret erhölls genom "trial and error").

Värdet top: "52px" ställer in utfyllnaden av det redan flytande sidofältsblocket från den övre kanten. Värdet av topp Däremot har jag det var ett problem i händelse av att den totala höjden på huvudsidofältet var mindre än höjden på innehållsområdet. En sådan sak kom ut, till exempel när du tittade på arkivet med rubriker:

Ur CSS-synpunkt förstår jag varför detta händer, men jag var för lat för att tänka på en fix. Jag var bara tvungen att vägra visa detta flytande sidofältsblock på sådana sidor (det behövs inte där).