Плавающие блоки на JQuery

На многих сайтах стало популярным делать так называемые "плавающие блоки". Первый раз когда я ими заинтересовался, то думал о них, как о "пристающих блоках". Потому что они приставали к моему экрану и не давали себя скрыть, заставляя невольно обращать на них внимание. Так вот, давайте отомстим им! Научимся реализовывать их самым простым способом.

Существует много способов реализовать плавающие блоки. Но сегодня я познакомлю вас с наиболее простым. Простым, но не ущербным по функциональности. Кому надо - можно навесить всяких эффектов и крутых штук. Готовы? Давайте приступим.

Для начала создадим html разметку или каркас наших блоков. Сделаем 2 блока - с основным содержимым и правую колонку - которая потом и будет "приставать" к нашему экрану:

<div class="content"></div>
<div class="sidebar"></div>

Как и обещал - все просто. Объяснять нечего. Перейдем к стилям. Тут чуть посложнее:

body {
	margin:0;
}
.content {
	height:10000px;
	background-color:yellow;
	width:500px;
	float:left;
}
.sidebar {
	width:300px;
	float:left;
	height:200px;
	background-color:green;
	margin-top:310px;
}
.fixed {
	position:fixed;
	top:10px;
	left:500px;
	margin-top:0;
}

body - все внешние отступы равны 0 - стандарт, да и расчеты в дальнейшем упростит.

.content - высота: 1000px, фоновый цвет: желтый, ширина: 500px, обтекание блока: слева.

.sidebar - высота: 200px, фоновый цвет: зеленый, ширина: 300px, обтекание блока: слева, отступ сверху: 310px - нужен для визуального восприятия.

.fixed - я добавил этот класс специально. Он будет помогать нам делать блок "плавающим". Стили: позиционирование элемента: фиксированное на странице, отступ сверху (для положения на странице): 10px, отступ слева: 500px - аккурат в размер блока .content, внешний отступ сверху: 0 - обнуляем стиль блока .sidebar.

После применения стилей получаем такую картину:

Теперь попробуем прокрутить страницу вниз (из-за большой высоты блока .content у нас есть полоса прокрутки) и увидим, что блок .sidebar не пристал к экрану:

Точно! Мы же не написали скрипт. Займемся этим:

$(function(){
 $(window).scroll(function() { 
  var top = $(document).scrollTop();
  if (top > 300) $('.sidebar').addClass('fixed');
  else $('.sidebar').removeClass('fixed');
 });
});

Этот скрипт делает следующее: когда мы прокрутим страницу на 300px, то блоку .sidebar будет добавлен класс fixed. Если мы будем опускаться ниже, то класс fixed будет оставаться. Но как только мы начнем крутить страницу вверх и пересечем нашу границу в 300px, то класс fixed будет убран у элемента .sidebar. Все достаточно просто. Получается так: блок висит себе на странице. Мы начинаем крутить колесо мыши, прокручиваем на 300px и присваиваем .sidebar класс fixed, который заставляет блок отображаться на странице так, как нам надо. При желании можно навесить кучу дополнительных эффектов вроде плавного появления или перескакивания.

Поместить скрипт можно между тегами <head></head>. Так как это JQuery, не забываем подключить свежую библиотеку. О том, как это сделать, я писал здесь.

Полный код страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
 $(window).scroll(function() { 
  var top = $(document).scrollTop();
  if (top > 300) $('.sidebar').addClass('fixed');
  else $('.sidebar').removeClass('fixed');
 });
});
</script>
<style>
body {
	margin:0;
}
.content {
	height:10000px;
	background-color:yellow;
	width:500px;
	float:left;
}
.sidebar {
	height:200px;
	background-color:green;
	width:300px;
	float:left;
	margin-top:310px;
}
.fixed {
	position:fixed;
	top:10px;
	left:500px;
	margin-top:0;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="sidebar"></div>
</body>
</html>

04.04.17

Ссылка на статью:

https://webkab.ru/plavayushhie-bloki-na-jquery/