Нередко на веб-сайтах можно узреть «плавающие» блоки, которые остаются в поле видимости при прокрутке странички. Это дозволяет с акцентировать внимание гостей на некий принципиальной инфы. Для реализации таковой способности можно пользоваться готовыми решениями — плагинами, или употреблять скрипт. В данном уроке мы поведаем о том, как создать плавающий сайдбар без плагина. Информация будет полезна для хозяев веб-сайтов, работающих как на WordPress, так и на остальных движках.
Сперва нужно подключить библиотеку jQuery, если она еще не подключена. Для этого открываем файл «header.php» и в области «head» вставляем строчку:
<script src="https://siteblogger.ru/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>
Как видно, ничего сложного тут нет. Таковым образом, если нужно создать плавающий сайдбар без плагина, то довольно просто скопировать данный код и расположить его на собственном веб-сайте в подходящем месте.