Как сделать плавающий сайдбар без плагина

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

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

Комментарии к “Как сделать плавающий сайдбар без плагина”

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *