Допустим нам нужно сделать 1 виджет фиксированным. Делается это просто, в 2 шага.
Шаг 1. Добавляем скрипт в тело страницы:
[php]
<!– код который делает плавающий виджет –>
<script>
$(‘.sidebar’).load(‘/sidebar/’, function() {
var el = $(‘#text-21 ‘);
var temp = $(‘<div id="temp"/>’).height( el.outerHeight() + 40 );
var win = $(window);
var offset = $(‘.sidebar’).outerHeight() + 200;
win.scroll(function() {
if (win.scrollTop () >= offset) {
el.after(temp);
el.not(‘.animated’).css({‘margin-top’: ‘-‘ + ( el.outerHeight() + 20 ) + ‘px’}).stop();
el.addClass(‘fixed animated’).animate({‘margin-top’: 10}, 520);
} else {
el.removeClass(‘fixed animated’);
$(‘#temp’).remove();
}
}).scroll();
});
</script>
[/php]
Шаг 2. Оборачиваем нужный элемент дивами:
[php]
<div class="sidebar-floating">
нужный элемент
</div>
[/php]
Шаг 3. Вместо text-2 – подставляем ID вашего виджета:
[php]<div id="text-2 /">[/php]
А так же везде где указан id сайдбара меняем на класс: #sidebar меняем на .sidebar
Шаг 4. В стили добавляем код:
[php]
#text-2.fixed {
position: fixed;
top: 20px;
}
[/php]
где код #text-2 – наш ID виджета.
После выше проделанных действий Ваш виджет будет появляться после того как вы опустите экран ниже последнего виджета.
