Часто на сайтах можно увидеть «плавающие» блоки, которые остаются в поле видимости при прокрутке страницы. Это позволяет с акцентировать внимание посетителей на какой-то важной информации. Для реализации такой возможности можно воспользоваться готовыми решениями — плагинами, либо использовать скрипт. В данном уроке мы расскажем о том, как сделать плавающий сайдбар без плагина. Информация будет полезна для владельцев сайтов, работающих как на WordPress, так и на других движках.
Первым делом необходимо подключить библиотеку jQuery, если она еще не подключена. Для этого открываем файл «header.php» и в области «head» вставляем строку:
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
Теперь открываем файл «sidebar.php» и находим или создаем новый блок, который хотим заставить «плавать», с идентификатором id="float-sidebar".
<div id="float-sidebar">Текст плавающего блока</div>
Содержимое плавающего блока может быть каким угодно, при необходимости его можно отредактировать. Оно и будет «плавать» в сайдбаре.
Далее вставим код, который будет перемещать наш блок, а чуть ниже кода вставим сам блок:
<script>// <![CDATA[ $(document).ready(function(){ var floatsidebar = $("#float-sidebar"); var offset = floatsidebar.offset(); var left = offset.left; var top = offset.top; var width = $("#float-sidebar").width(); var height = $("#float-sidebar").height(); $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if (scrollTop >= top) { $('#float-sidebar').css({ left:left+'px', position:'fixed', top:"5px", width:width+"px" }); } else { $('#float-sidebar').css({ position:'static', }); } }); }); // ]]> </script> <div id="float-sidebar">Текст плавающего блока</div>
Как видно, ничего сложного здесь нет. Таким образом, если необходимо сделать плавающий сайдбар без плагина, то достаточно просто скопировать данный код и разместить его на своем сайте в нужном месте.
Все работает. Наконец-то нашел то, что искал.
Оказывается так просто. jQuery есть. Спасибо.
Спасибо! Отличный скрипт!