Web Scripts

Фиксированный блок во время скролла

• 11-12-2017 •

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

Блок становится фиксированным во время скролла

Пример:

See the Pen Fixed block on scroll by Aleksandrs (@CoolS2) on CodePen.0

Как видно на примере, слева есть контент, а с правой стороны блок, который становиться


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 и задать в скобках параметр высоты (срабатывания). Если у вас есть варианты получше, всегда буду рад вашим комментариям!

One thought on “Фиксированный блок во время скролла

Добавить комментарий