Иногда мне на е-mail пишут с вопросом, а как ты сделал такой плавающий сайдбар, как у тебя сейчас на блоге, мол искал и не нашел, или не получается реализовать. В этом посте я покажу простенький код, который это делает, а точнее фиксирует нужный вам блок, при перемотке внизу, то есть не сразу фиксирует, а когда пользователь прокрутил страницу до этого блока, тогда этот блок фиксируется на месте, или «плавает».
О похожем сайдбаре я упоминал здесь, но в том способе он реально плавает :), а здесь фиксируется.
Плюс этого способа еще в том, что у вас остается ваш сайдбар и при этом, когда у вас большая статья, при перемотке вниз, сайдбар не пустует, а за счет того, что блок постоянно на виду, повышается CTR, например, рекламы в нем, или каких-то топовых статей вашего сайта, ссылки на которых в это плавающем сайдбаре.
Шаг первый, добавляем этот код в то место, где будет ваш будущий плавающий блок:
(в движке DLE это обычно файл main.tpl, а в wordpress-е это файл sidebar.php)
<div>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>500) $('#scrollable').css({'position':'fixed','top':'0px'});
else $('#scrollable').css({'top':'500px','position':'absolute'});
});
</script>
<div id='scrollable' style='width:300px;height:300px;'>
ЗДЕСЬ КОНТЕНТ, КОТОРЫЙ БУДЕТ ФИКСИРОВАТЬСЯ (ПЛАВАТЬ)
</div>
</div>
- В коде есть два значения 500 – это отступ от верхней границы сайта, до места, где начинается тот блок, который должен будет плавать. Методом тыка подберите те цифры, которые подойдут для вашего сайта.
- А также есть значения 300 на 300 – это непосредственно размер вашего блока. Выставьте нужные вам значения, иначе блок будет показываться не полностью.
Шаг второй, если у вас не подключена библиотека jquery
Если после первого шага блок не работает , то перед тегом </head> вставляем строчку:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
Можете подключить библиотеку jquery по-новее, если хотите. В данном случае версия 1.3.2.
На этом все, должно работать.
Единственное с чем может возникнуть косяк, так это конфликт jquery с другими библиотеками, которые у вас возможно подключены. Они обычно подключены, если у вас используются на сайте какие-либо слайдеры и что-то в этом роде.
UPDATE. Есть один минус этого блока: если он большой, то наезжает на футер. В таком случае попробуйте скользящий блок на jQuery, о котором я написал в другой статье.
Есть еще удобный плагин для WordPress- Q2W3 Fixed Widget, он вообще не требует ковыряний в коде (сейчас именно он стоит у меня на этом сайте). Просто устанавливаете его и в любом виджете появляется возможность с помощью галочки сделать его плавающим.
P.S. Если что-то не получилось, напишите в комментариях или мне, через страницу «Контакты», разберёмся вместе.
Хочу выразить огромную благодарность этому человеку. Сколько бился над этим сайдбаром и ничего не получалось. Попросил объяснить и теперь имею на сайте плавающий сайдбар. Единственный вопрос: а как поисковики реагируют на этот сайдбар?
Скажу только, что у меня на блоге около двух месяцев уже этот код стоит и разницы в трафике не заметил.
Привет, я установил у себя на сайте. да вот проблема, как сделать так чтоб реклама не наезжала на футер? И не нарушаются ли правила адсенс?
Я пока не в курсе, как это сделать. У себя на сайтах просто в сайдбаре длинный блок не размещаю, чтоб не наезжал. Подумаю над этим, может какое решение и найду, нашел такое решение.
По поводу адсенса. Мне пока никаких замечаний от них не поступало. Вроде не должно нарушать, тут же нет никакого призыва кликать.
Отладчик сообщил: is not a function с указанием на 4 строку твоего кода
Ессно не работает.
ВП 3,5,1, тема дефолтная — twentyten. Вставил в sidebar.php
Не работает с темой twentyten. И что? На второй Twenty Twelve — работает, только что проверил. А на остальных и самому можно проверить.
Код рабочий. При том работает на любом сайте, с любым движком и без движка. А если не работает, то значит конфликт с уже с имеющимися скриптами на сайте.
И он не мой, js я еще не изучал.
Спасибо большое! Всё получилось, не думал, что всё так просто…
Единственное хочется спросить — как сделать так, что бы этот блок не вылезал на футер сайта(если футер небольшой), а оставался в пределах этого блока…т.е. нужно ограничение по «bottom»…
Как это реализовать в этом коде?
Заранее спасибо..
Я уже отвечал, что не в курсе как это реализовать в этом коде т.к. не спец. в JS.
Но, есть еще один способ, как реализовать такой плавающий сайдбар, писал вот здесь https://seodnevnik.ru/sozdanie-sajtov/skolzyashhij-blok-na-jquery-v-sajdbare.html
Там блок на футер не наезжает.
Спасибо за блок, все заработало. Много чего до этого перепробовал на шаблоне WP.
Мне пришлось часть коммента убрать, так как ваш код не отобразился.
Здравствуйте. Подскажите пожалуйста, как сделать так, дабы блок внизу не наезжал на футтер? Тоесть, сверху отступ сделать можно, а вот внизу не получается. Функция margin-bottom не работает, а margin-top работает.
Вот скрин, чтоб понятней было о чём я: _https://dl.dropboxusercontent.com/u/48357141/1.PNG
Сорри, если вопрос нубский, ибо сам я нуб. Заранее спасибо.
Попробуйте сделать скользящий блок на jQuery. Там такой проблемы нету.
А в этом коде сам не знаю как исправить этот косяк.
Пробовал, работает вроде нормально, но вот косяк всё же есть, и не понимаю почему
Скрин: _https://dl.dropboxusercontent.com/u/48357141/2.PNG
Спасибо за ответ. Пробовал, но он у меня криво работает почему-то. И без понятия как решить.
Скрины:
сверху: _https://dl.dropboxusercontent.com/u/48357141/2.PNG ( опускает блок новостей под себя)
внизу: _https://dl.dropboxusercontent.com/u/48357141/3.PNG ( нормально)
Скорее всего блок не причём и проблема в стилях вашего сайдбара.
Возможно не хватает float: left для дива id=»sidebar».
Короче, со стилями поэкспериментируйте. Я так сходу не скажу.
Я у себя на блоге проверял блок, он отлично работал.
А применимо это к опенкарту?
Хорошая статья, спасибо очень помогли, сделал у себя так же
Ну вот, а то какие-то плагины советуют. Спасибочки.