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

Доброго времени суток, мои многоуважаемые читатели. В одной из предыдущих своих статей,Q2W3 Fixed Widget (Sticky Widget). Как сделать плавающий виджет в сайдбар, я обещал вам рассказать, мои дорогие читатели, как сделать плавающий блок в сайдбаре без помощи плагинов и виджетов.

Метод описанный в данной статье подойдет для реализации многих целей, одной из которых является, необходимость научить плавать блок который прописан непосредственно в файле sidebar.php, используемой темы wordpress.

Как вы понимаете при помощи плагина Q2W3 Fixed Widget, реализовать сказанное не получиться; кстати, данный пример – это частный случай, для чего можно применить метод описанный в данной статье. Ну, да ладно, хватит болтать, пора действовать.

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

Прежде, чем что-либо делать, открываем файл header.php вашей темы, и подключаем библиотеку jquery – вставляем строчку:


<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

Далее, открываем файл sidebar.php на редактирование, и создаем новый div блок, или смотрим id уже существующего блока, который вы хотите заставить плавать в боковой панели вашего сайта.


<div id="float-sidebar"> текст плавающего блока </div>

Содержимое div-блока float-sidebar, вы можете отредактировать как вам угодно – содержимое блока float-sidebar, будет плавать в сайдбаре.

Ну, а теперь вставляем сам jquery-код, который будет заставлять перемещаться наш блок:


<script language="javascript">
$(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:"0px",
width:width+"px"
});
} else {

$('#float-sidebar').css({
position:'static',
});
}
});
});
</script>

Данный код, необходимо вставить перед кодом вставки div блока с содержимым(в моем случае, блок float-sidebar) и после подключения библиотеки jquery.

На, этом все. Пример работоспособности метода, описанного в данной статье вы можете, проверить здесь.

Метод описанный в данной статье, я уже использовал для создания плавающей шапки сайта, читай статью:Плавающая шапка(header) сайта. Создаем плавающую шапку для сайта на CSS и Jquery. Как вы понимаете, при помощи данного метода, можно заставить плавать любой имеющийся блок на сайте – было бы желание, и капля знаний JavaScript и JQuery; в общем к чему я все это – знание сила! Учитесь дорогие друзья, и делитесь своими знаниями с другими людьми – вы ничего не потеряете, а даже наоборот приумножите их.

А я заканчиваю свою очередную статью, и предлагаю вам очередное веселое видео. Всем спасибо, всем пока!


С уважением, . Google+