logo частный маркетолог фрилансер Москва
logo частный маркетолог фрилансер Москва

Как сделать первый или второй виджет фиксированный без плагина

3 сентября 2015 в 9:07 Блог веб-разработчика
Хотите я произведу настройку как описано в статье вместо вас? Стоимость работы: 500 руб. Срок исполнения: 1 час. Работаю без предоплаты.

Допустим нам нужно сделать 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]

2015-09-03_114738

А так же везде где указан id сайдбара меняем на класс: #sidebar меняем на .sidebar

Шаг 4. В стили добавляем код:

[php]
#text-2.fixed {
position: fixed;
top: 20px;
}
[/php]

где код #text-2 — наш ID виджета.

После выше проделанных действий Ваш виджет будет появляться после того как вы опустите экран ниже последнего виджета.

Похожие статьи

Оставить заявку
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Введите контактный E-mail: *

Ваш вопрос:

Пожалуйста, докажите, что вы человек, выбрав дом.

Рассчитать стоимость
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Прикрепить файл:

Ваш вопрос:

Введите контактный E-mail: *

Заказать обратный звонок
Для экономии вашего времени на все звонки отвечают программисты, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Введите ваше имя *

Как с вами связаться? *

Введите контактный телефон *

Корзина пуста