Плавающий блок — это блок, который при прокрутке остается на одном месте.

Демо

Я уже перепробовал много плагинов и как всегда предлагаю вам самое лучшее решение, которое я смог найти.
Это мощный и одновременно простой плагин, который делает именно то, что требуется.

Установка

Подключаем jQuery.

Скачиваем со страницы плагина сам плагин и сохраняем его в папку js своего сайта.

Подключаем файл плагина после jQuery.

<script src="js/jquery.sticky-kit.min.js"></script>

Создаем html

Здесь суть в том, что плавающий элемент будет передвигаться внутри контейнера (другого высокого слоя).

Поэтому делаем вот такой html

<!-- Основная часть внутри которой плавает блок -->
<div id="content">
	
	<!-- Слева (плавающий блок) -->
	<div id="content-left">Плавающий блок</div>
	
	<!-- Справа -->
	<div id="content-right">Высокий блок справа</div>
	
	<!-- Выключение обтекания -->
	<div class="clear"></div>
	
</div>

И такие стили

#content {
	width: 1000px; 
}

#content-left {
	width: 200px;
	float: left;
	height: 600px;
	border: 1px solid black;
}

#content-right {
	width: 780px;
	float: right;
	height: 2000px;
	border: 1px solid black;
}

.clear {
	clear: both;
}

Теперь добавляем скрипт

$(document).ready(function(){
	
	// Находим плавающий блок и делаем его плавающим
	$('#content-left').stick_in_parent({
		// Отступ сверху
		offset_top: 20 
	});
});

Удобная обратная прокрутка

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

$(document).ready(function(){
	
	// Находим плавающий блок и делаем его плавающим
	$('#content-left').stick_in_parent({
		// Чтобы сразу прокручивался обратно
		inner_scrolling: true,
		// Отступ сверху
		offset_top: 20 
	});
});

На этом все.

Хотите уже через 3 недели
начать зарабатывать
на веб-разработке?

Получите мою книгу в подарок. Просто введите свой e-mail в форму ниже и нажмите на оранжевую кнопку.

Вам понравился этот материал? Тогда, пожалуйста:

  1. Поставьте лайк.
  2. Поделитесь этой страницей в социальных сетях.
  3. И, конечно же, оставьте свой комментарий :)
Загрузка комментариев...
Share This
Хотите получать 2000-3000 рублей в час на веб-разработке?

Хотите получать
2000-3000 рублей в час
на веб-разработке?

 

* Делаете много, а зарабатываете мало?

* Надоело каждый день ездить в офис?

* Работа не приносит радость?


Получите книгу «Как зарабатывать 2000-3000 рублей в час на веб-разработке» в подарок.

Чтобы получить книгу, введите свой e-mail в форму ниже и нажмите на оранжевую кнопку.

 

Пожалуйста, подтвердите Вашу почту для получения книги