Главная
Дизайн блога
Как сделать Плавающий блок в сайдбаре?

Как сделать Плавающий блок в сайдбаре?

Доброго времени суток всем читателям – Sozdaiblog.ru!

В сегодняшнем посте Вы узнаете,как сделать плавающий блок в сайдбаре Вашего сайта.

Для начала мне хотелось бы сказать, что за появление этой публикации нужно поблагодарить одного из посетителей блога, который воспользовавшись разделом « Хочу статью » попросил найти и показать оптимальное решение поставленной задачи.

Такое решение нашлось, и сегодня оно будет доступно всем Вам.

Для чего служат плавающие блоки?

В основном плавающие блоки используют для размещения рекламной информации, которая при прокрутке страницы всегда остаётся в поле зрения читателя.

Конечно, в первую очередь всё зависит от фантазии Веб-мастера. В такой плавающий блок можно запихнуть всё что угодно, будь то реклама, меню навигации или праздничное поздравление. Здесь решать только Вам. Главное не перестарайтесь, так как чересчур яркое оформление плавающего блока будет отвлекать читателей от основного контента. Делайте всё в меру.

Ладно, достаточно болтовни пора переходить к делу.

Итак.

Плавающий блок в сайдбаре.

Чтобы сделать плавающий блок мы не будем использовать какие-либо плагины или огромные простыни кода.

Нам поможет маленький и лёгкий скрипт с минимумом настроек. Вот он, встречайте:

<script>
$(window).scroll(function() {
if ($(this).scrollTop()>1910) $('#scrollable').css({'position':'fixed','top':'0px'});
else $('#scrollable').css({'top':'1568px','position':'static'});
});
</script>

<div id='scrollable' style="width:280px";>

ТУТ ВАШ КОНТЕНТ
</div>

Всё что Вам нужно – это вставить вместо надписи « ТУТ ВАШ КОНТЕНТ », тот блок, который, по Вашему мнению, должен плавать.

Обратите внимание на числовые значения, которые присутствуют в скрипте. Они отвечают за расположение плавающего блока и моментом начала его плавания при скроллинге (прокрутке). Вам потребуется их настроить под свои нужды. В данный момент их значения соответствуют примеру одного из моих блоков, который Вы можете посмотреть в сайдбаре.

Так же внутри тега DIV , которым обёрнут Ваш плавающий блок, Вы можете задавать необходимые CSS стили. На данный момент у меня задана только одна ширина «width:280px» , что вполне достаточно для моей реализации.

Если Вы надумаете сделать плавающий сайдбар, то учтите, что его элементы не должны выходить за зону видимости без скроллинга. Иначе, плавать будет только то, что Вы видите изначально, а всё остальное будет скрыто за окном браузера.

На сегодня это всё. Хорошего Вам настроения и до новых статей…

С уважением, Денис Черников!