Когда необходим плавающий виджет в сайдбаре
Большинство блоггеров используют шаблоны, темы Blogger с двумя колонками. В теме главная колонка сообщений и рядом колонка сайдбара, где размещают различные виджеты для привлечения внимания читателей к другому контенту на сайте.На экране монитора компьютера колонка сайдбара обычно движется вниз синхронно с колонкой сообщений. Если статьи на сайте длинные, то часто контент в сайдбаре заканчивается раньше, чем в главной колонке. Просматривая статью дальше, читатель уже видит пустую колонку сайдбара.
С одной стороны, в этом есть свой плюс, читатель не отвлекается от просмотра статьи, и есть больше шансов на то, что он дочитает её до конца. А это улучшит поведенческие показатели сайта в поисковых сервисах, а значит увеличится и посещаемость блога. С другой стороны, если посетитель по мере прочтения теряет интерес к статье, то не видя других предложений в сайдбаре, он просто закрывает страницу браузера и уходит с сайта. Какой вариант лучше? - однозначного ответа нет.
Многие блоггеры делают липкий плавающий сайдбар, который, как бы, прилипает к экрану и плывет по странице сайта, оставаясь все время в поле зрения читателя. В таком плавающем сайдбаре выгодно размещать виджеты с рекламой или другие, интересные читателю, предложения.
Преимущество именно плавающего сайдбара, перед отдельным плавающим виджетом, в том, что в сайдбар удобно вставлять, легко и быстро менять любые виджеты. Причем, можно разместить несколько, плавающих вместе с сайдбаром, виджетов
Как сделать липкий плавающий сайдбар в Blogger
Колонку сайдбара в теме Blogger выгодно разделить по высоте на две части. В верхней части оставить обычный, стандартный формат сайдбара, id="sidebar". А ниже разместить липкий плавающий сайдбар, id="sidebar-2" . В таком сайдбаре удобно разместить любые виджеты, которые прилипнут к экрану вместе с сайдбаром.Существуют разные сценарии поведения плавающего сайдбара на экране в окне браузера. Эти варианты отличаются моментом, местом прилипания и отлипания сайдбара при прокручивании страницы сайта.
Наиболее востребованным сценарием поведения плавающего сайдбара является следующий: по мере прокрутки страницы сайта, когда верхняя граница сайдбара поравняется с верхней границей окна браузера, сайдбар прилипает к экрану и остается неподвижным; сайдбар отлипает - когда его нижняя граница поравняется с нижней границей секции id="main" темы сайта. Эта граница проходит на главной колонке сайта ниже комментариев. При таком варианте плавающий сайдбар не перекрывает виджеты в футере сайта.
Описанный выше сценарий работы плавающего сайдбара реализован на этом сайте.
Создаем секцию sidebar-2 в коде темы
Секцию сидебар-2 в коде темы создаем стандартным способом, который многократно описан в различных источниках. В HTML коде темы находим: <b:section class='sidebar' , ниже ищем закрывающий тег:</b:section>
и после него добавляем:
<!-- Start sidebar-2 -->
<b:section class='sidebar' id='sidebar-2' maxwidgets='3' name='Sidebar-2 (fixed)' showaddelement='yes'>
</b:section>
<!-- End sidebar-2 -->Скрипт липкого плавающего сайдбара
В конец кода темы, перед тегом </body> добавляем скрипт:<!-- Плавающий #sidebar-2 отцепляется, когда его нижний край поравняется с нижним краем #main. Скрипт отключен на мобильном -->
<b:if cond='data:blog.isMobileRequest == "false"'>
<script>
//<![CDATA[
(function(){
var a = document.querySelector('#sidebar-2'), b = null, P = 10;
window.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[1]);
}
}
var Ra = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#main').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент
if ((Ra.top - P) <= 0) {
if ((Ra.top - P) <= R) {
b.className = 'stop';
b.style.top = - R +'px';
} else {
b.className = 'sticky';
b.style.top = P + 'px';
}
} else {
b.className = '';
b.style.top = '';
}
}
})()
//]]>
</script>
</b:if>Первая строка кода, которая начинается с условного тега <b:if , запрещает работу скрипта при показе страницы на смартфонах.
Стили CSS плавающего сайдбара
Перед тегом ]]></b:skin> в код темы блога добавляем:/*--- Плавающий sidebar-2, плавает только на декстопе---*/
@media screen and (min-width: 992px) {
.sticky {position: fixed;z-index: 101;}
.stop {position: relative;z-index: 101;}
}
#sidebar-2 {display: block;margin: 0 auto;} /*--- В sidebar-2 oтступы margin-top у верхнего и bottom у нижнего виджетов =0 ---*/В Sidebar-2 размещаем любой виджет и проверяем работу плавающего сайдбара на странице сайта. Необходимо проследить, чтобы в стилях CSS виджета, отступы margin-top i margin-bottom были равны нулю, т. е. не выходили за границы sidebar-2. Иначе, в моменты залипания и отлипания, сайдбар будет подпрыгивать.
Комментариев нет:
Отправить комментарий
Уважаемый читатель!
Оцените полезность статьи, задайте вопрос, возразите автору или расскажите, как делаете Вы.