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


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

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

Понравилось? Поделитесь с друзьями!

Читайте:  Как избрать домен веб-сайта и что же все-таки это такое

Ваш комментарий

Ваш адрес email не будет опубликован.

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.