Bitrix fix страничната лента банер промяна php. Фиксирано оформление с две колони

Най-простият пример за фиксирана плаваща странична лента в HTML+CSS+JS.

Каква е неговата особеност - при превъртане страничната лента се залепва за горната част на прозореца, но в същото време, когато страничната лента се превърта до долния колонтитул, тогава тя се отделя от горната част на екрана и се залепва за своя отдолукъм долния колонтитул, като по този начин не припокрива долния колонтитул (долният колонтитул трябва да е висок). Ако ме разбираш.

Примерът е взет от някакъв сайт и е много примитивен (и морално остарял), подходящ само за това оформление. Още универсален код можете да намерите в тази статия и вече можете да напишете свой собствен код за вашия проект.

HTML маркиране за проста страница ЗАГОЛОВЕН СЪДЪРЖАНИЕ ФИКСИРАН ДОЛЕН СТРАНИЧЕН ЛЕНТ CSS стилове за блокове на съдържанието .header (ширина: 100%; фон: лилав; височина: 80px; ) .content (ширина: 80%; фон: син; височина: 800px; float : отляво; ) .sidebar (ширина: 20%; фон: зелено; височина: 100px; плаващ: отдясно; ) .sidebar.fixed (позиция: фиксирана; отдясно: 50%; margin-right: -50%; ) .footer (ширина: 100%; фон: сив; височина: 500px; ясно: и двете; ) JS скрипт за фиксирана странична лента при превъртане на страница

Не забравяйте да включите 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); )); ));

Плаващ блок (или както се нарича още движещ се, фиксиран, заседнал) е необходим на сайта, така че потребителят да вижда един фиксиран елемент при превъртане на страницата, в която най-често се поставя реклама (тийзъри, банери или контекст).

Уви, правилата на adsense ни забраняват това. Много собственици на сайтове обаче пренебрегват правилата на свой собствен риск. Може би дори не са наказани за това, но не бих ги посъветвал да поемат рискове.

Поставям YAN, моите тийзъри/банери в такива блокове и понякога, вместо реклама, показвам подобни публикации или някаква полезна информация за посетителя.

Нека ви кажем как можете да направите плаващ блок на вашия сайт.

Задача: направете последния блок в страничната лента (страничната лента) плаващ. Освен това, така че да се залепи само в момента, в който потребителят го достигне чрез скролиране, а не веднага след отваряне на страницата. Също така, блокът трябва да „стърчи“, достигайки долния колонтитул (т.е. да не го припокрива).

Най-работещият начин

Има много реализации на лепкавия блок, но не всички от тях работят правилно. Ще ви кажа от личен опит: един и същ метод за инсталиране на блок може да работи на един сайт, а задръстванията ще се появят на друг.

По-долу е даден пример за плаващ блок, който е работил на почти всеки сайт, на който съм го инсталирал. Кози нямаше. Двигателят също не е важен (DLE, WordPress, LiveStreet и др.).

Поставете следния HTML код в желаното място на страничната лента:

$(window).scroll(function() (
var sb_m = 20; /* горна и долна подложка */
var mb = 300; /* височина на мазето с поле */
varst = $(прозорец).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) ) ;
}
иначе(
sb.css(( "paddingTop" : 0 ) ) ;
}
}
} ) ;

В този код можете да зададете горната, долната и височината на долния колонтитул, т.е. височината, на която блокът трябва да спре.

Сега включваме JS. За да направите това, напишете в раздела HEAD:

Най-лесният начин (за WordPress)

Също така безопасен метод, но чрез инсталиране на . Работи без задръствания.

Предимства:

• няма нужда да разбирате/разбирате HTML;
• лекота и скорост на инсталиране.

недостатъци:

не е гъвкав. Цялата джаджа става плаваща (включително името и външния й вид). Да речем, че ще бъде трудно да направите този блок с различен цвят или размер.

Как да използвам:

Изтегляне на приставката.

Ние монтираме.

Активирате.

Отидете в админ панела в раздела: Дизайн -> Джаджи. Отворете джаджата, която искаме да коригираме.

Поставете отметка до „Коригиране на джаджа“ и щракнете върху бутона „Запазване“.

Други начини за внедряване на плъзгащи се блокове

Изглеждаха ми по-малко удобни и не толкова ясни, колкото двата метода по-горе. Но все пак ще ви разкажа за тях.

Вариант №1 (без jQuery)

Поставете в страничната лента:

Ние предписваме стилове в HTML (по-добре е да добавите веднага към CSS):

.лепкав(
позиция: фиксирана;
z-индекс: 101
}
.Спри се(
позиция: роднина;
z-индекс: 101
}

Сега добавяме самия скрипт към страницата (по-добре е да го поставите отделен файл, като в "Най-работещият начин"):

(функция() (
var a = document.querySelector("#aside1") , b = null, P = 0; // ако нулата е заменена с число, тогава блокът ще остане преди горният ръб на прозореца на браузъра да достигне горния ръб на елемента. Може да бъде отрицателно число
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
функция Ascroll() (
if (b == нула) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
за (вар. 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";
}
varRa = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // блок селектор, при достигане на горния ръб на който залепващият елемент трябва да бъде откачен; Math.round() е само за IE; ако нулата се замени с число, тогава блокът ще залепне преди долният ръб на елемента да достигне долния колонтитул
ако ((Ra.top - P)

Моля, имайте предвид, че ако има единични кавички в кода, ограден в echo "", тогава те ще трябва да бъдат екранирани, т.е. добавете пред всеки от тях обратна наклонена черта (\") без скоби, разбира се.

Общо взето се оказа как се случи. Как конкретно да свържете това с вашата тема, ще трябва да решите сами - когато има време, дори е готино да си „счупите главата“. Благодаря ти.

Късмет! Ще се видим скоро на сайта на страниците на блога

Може да се интересувате

WebPoint PRO е адаптивна WordPress тема с широка функционалност и компетентна техническа оптимизация за търсачки
Share42 - скрипт за добавяне на бутони за социални мрежи и отметки към сайта (има опция за плаващ панел)

Какви са изискванията за оформлението?

• Гумено двуколонно оформление
• страничната лента с фиксирана ширина 300px
• съдържанието се разтяга до останалата част от ширината.
• долен колонтитул, притиснат до дъното (в този урок няма да покажа как се прави това).

Какви проблеми с Css възникват при изготвянето на такова оформление: 1 начин.

Ако плавате блокове, трябва да им дадете фиксирана ширина (не можете да зададете 1 странична лента на 300px и 100px съдържание). В този случай или съдържанието се плъзга надолу, или се появява 300px хоризонтално превъртане наляво. Е, основното нещо, което трябва да разберем, е, че този метод не ни подхожда.

2 начина.

Много наборчици предлагат този метод, за какво си мислят?! Същността на метода е, че можете да настроите страничната лента да плава с ширина 300, а не да плава съдържанието и да му зададете margin-left: 300px. Добър начин и изглежда, че всичко работи толкова добре. Честно казано, мислех, че това е най-добрият начин, но този метод има своите клопки. Причините за изоставянето на този метод са, че ако внезапно създадем в съдържанието, например, меню с плаващи li или други плаващи блокове и след това искаме да ги изчистим с clear:both, тогава долната граница на този блок се плъзга надолу до нивото на долната граница на страничната лента (Какво и не е странно, тъй като пяната е изчистена, можете да избегнете това, ако зададете плаващия блок на фиксирана височина, но това изобщо не е случаят да зададете фиксирана височина ).

3 начина.

Може да се използва за абсолютна позиция на страничната лента, но само ако сте сигурни, че съдържанието ще бъде по-голямо от страничната лента по височина, в противен случай цялото съдържание на страничната лента ще се побере в долния колонтитул (в края на краищата, абсолютното позициониране се изтегля от общия поток ).

Но за мен това също не е много добър начин!

4 начин.

„Страхотен начин, ако има недостатъци, моля, коментирайте. Но мисля, че това е най-добрият начин.“

• Предимства на този метод: първо, съдържанието на DOM ще бъде преди страничната лента, което е добре за търсачките.
• нищо няма да пасне на долния колонтитул
• всички блокове могат да бъдат изчистени и нищо няма да се плъзне към долната граница (Така че преодоляхме проблемите на втория метод).

Като цяло как работи: погледнете кода, първо идва съдържанието, последвано от страничната лента. задаваме float на тези два блока (разбира се страничната лента се плъзга надолу). след това задаваме свойството на страничната лента margin-left:-100%. страхотно, върна се на мястото си и направете отстъп на съдържанието с margin-lerft:300px.

html css .sidebar(
ширина:300px;
дисплей:блок;
поплавък: наляво;
марж: 0 0 0 -100%;
}
.съдържание(
min-width:723px;
дисплей:блок;
поплавък: наляво;
поле: 0 0 0 220px;
}

Интересното е, че блокът, който остава на едно място при превъртане, се нарича: „движещ се“, „плаващ“, „движещ се“, „движещ се“, „плъзгащ се“. Но всъщност той е „заседнал“, „фиксиран“, „фиксиран“ и се намира в определена област на екрана на монитора, независимо от степента на превъртане на уеб страницата.

Първоначален вариант, когато нищо не плава

Изходни данни: блокът е вече позициониран. Имам нещо подобно с голям футър, вие го имате различно.

Как да направите блок (div, отстрани и т.н.), заглавка, реклама, коригирано меню. Само CSS #aside1 ( /* блокирайте, за да останете на място */позиция: фиксирана; z-индекс: 101; )

В интерес на истината, в повечето случаи: плаващи бутони на социални мрежи, броячи, не се изисква скрипт.

Как да направите div блок залепване, докато превъртате страницата. Вече има сценарий

Тоест елементът с връзки (или каквото и да е) е далеч от началото на страницата. Да кажем, че заглавката е голяма или страничната лента съдържа много полезни неща, като търсене, категории и т.н. Когато горната част на прозореца на браузъра докосне горния ръб на елемент по време на превъртане, той залепва и се „вози“ надолу до края на страницата.

.sticky( позиция: фиксирана; горе: 0 px; /* ако нулата е заменена с число (и в скрипта също), тогава блокът ще остане преди горният ръб на прозореца на браузъра да достигне горния ръб на елемента. Може да бъде отрицателно число. Да използваме например */ z-индекс: 101; ) (функция()( // анонимна функция (function()( ))(), така че променливите "a" и "b" не стават глобални var a = document.querySelector("#aside1 "), b = null; // блокиращ селектор, който трябва да бъде фиксиран // Акофункция Ascroll() ( if (b == null) ( // добавете дъщерна обвивка, за да премахнете зависимостта от съседите var Sa = getComputedStyle(a, ""), s = ""; за (променлива 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); // първо поставете детето в блока за прилепване varl = a.childNodes.length; за (вар. i = 1; i< l; i++) { // преместване на всички други наследници към новосъздаденото дете (общо: вътре в кои скриптове все още работят) b.appendChild(a.childNodes); ) a.style.height = b.getBoundingClientRect().height + "px"; // ако има други блокове под плъзгащия се елемент, можете да използвате собствената си стойност a.style.padding = "0"; a.style.border = "0"; // ако елементът е присвоен или) if (a.getBoundingClientRect().top #aside1 > div:nth-child(3), #aside2 > div:nth-child(2) ")).forEach(function(a) ( // блокови селектори, които трябва да бъдат коригирани. Може да бъде или един блок, или два, или повече var b = null, P = 0; window.addEventListener("превъртане", Ascroll, false); document.body.addEventListener("превъртане", Ascroll, false); функция 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 ); // разстояние между блоковете, така че плаващите елементи да не се прилепват един към друг) else ( R = Math.round(Rh - A0.getBoundingClientRect().bottom + parseFloat(getComputedStyle(A0, "").paddingBottom.slice(0, -2))); ) if ((Ra.top - P ) W) ( if (Ra.top< K) { // превърти надолуако (R2 + N > R1) ( // не достигайте дъното if (Rb.bottom - W + N = 0) ( // свързвам се b.className = "лепкав"; 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)