Нередко на веб-сайтах можно узреть «плавающие» блоки, которые остаются в поле видимости при прокрутке странички. Это дозволяет с акцентировать внимание гостей на некий принципиальной инфы. Для реализации таковой способности можно пользоваться готовыми решениями — плагинами, или употреблять скрипт. В данном уроке мы поведаем о том, как создать плавающий сайдбар без плагина. Информация будет полезна для хозяев веб-сайтов, работающих как на 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>
Как видно, ничего сложного тут нет. Таковым образом, если нужно создать плавающий сайдбар без плагина, то довольно просто скопировать данный код и расположить его на собственном веб-сайте в подходящем месте.
