Предположим у вас есть вертикальные кнопки социальных сетей, с помощью которых посетители могут поделиться вашим контентом или сайдбар с полезной информацией. И во время скролла пользователь может пропустить или проскроллить и не заметить эти кнопки и нужную информацию в сайдбаре
Блок становится фиксированным во время скролла
Пример:
See the Pen Fixed block on scroll by Aleksandrs (@CoolS2) on CodePen.
Как видно на примере, слева есть контент, а с правой стороны блок, который становиться
position: fixed;
в определенный момент и при обратном скролле
position: absolute;
Многие очень часто применяют данную фишку и я в том числе. К примеру кнопки поделиться с левой стороны
Разбор кода
HTML
В первую очередь создадим наш скелет макета, подключаем bootstrap и делим контент на 2 части (одну для текста, другую для маленького плавающего блока)
<section>
<div class="row">
<div class="col-md-10">
<div class="content-block">
<h3>Заголовок</h3<
<p>тут много текст</p>
</div>
</div>
<div class="col-md-2">
<div class="float-block">
</div>
</div>
</div>
</section>
CSS
Дальше мы добавляем стили, для наглядности я добавил минимальную высоту блоку, чтобы можно было посмотреть как работает наш скрипт и задал плавающему блоку начальный отступ
У плавающего блока, в обязательном порядке у родителя должен быть position: relative;
section{
max-width: 600px;
margin:0 auto;
}
.col-md-10{
min-height: 900px;
}
.content-block{
padding: 15px;
}
.float-block{
background-color: red;
height: 50px;
width: 50px;
position:absolute;
top: 150px;
}
JQuery
В первую очередь мы задаем название нашего триггера, дальше в параметры функции мы будем задавать значение скролла pos, т.е. в какой момент функция будет срабатывать. Дальше мы отслеживаем во время скролла, значение top и если это значение превышает значение pos, то мы задаем стили нашему плавающему блоку position:fixed;, а если значение снова меньше значения pos, то возвращаем ему position: absolute;
Полный код выглядит следующим образом:
$.fn.followTo = function (pos) {
var $this = this,
$window = $(window);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'fixed',
top: 10
});
} else {
$this.css({
position: 'absolute',
top: 150
});
}
});
};
$('.float-block').followTo(140);
Вот и все, чтобы сделать блок плавающим, нужно воспользоваться .followTo и задать в скобках параметр высоты (срабатывания). Если у вас есть варианты получше, всегда буду рад вашим комментариям!
Спасибо, актуально! ))