+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка

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

Блог вебмастера

Допустим нам нужно сделать 1 виджет фиксированным. Делается это просто, в 2 шага.

Шаг 1. Добавляем скрипт в тело страницы:


<!-- код который делает плавающий виджет -->
<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>

Шаг 2. Оборачиваем нужный элемент дивами:

<div class="sidebar-floating">
нужный элемент
</div>

Шаг 3. Вместо text-2 — подставляем ID вашего виджета:

<div id="text-2 /">

2015-09-03_114738

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

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

#text-2.fixed {
  position: fixed;
  top: 20px;
}

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

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

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

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

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

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

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

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

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка