Фиксация блоков при прокручивании страницы

demo

Наверняка вы не раз видели, что при прокрутке страницы, некоторые её элементы остаются фиксированными. К примеру, при скролле главной страницы Google строка поиска приклеивается к верхней части экрана. Давайте обсудим реализацию этого модного эффекта.

Данный эффект является отличным приёмом для улучшения юзабилити. Следующее изображение в общих чертах охарактеризует то, что мы хотим реализовать:

Два состояния

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

  1. Панель поиска в обычном состоянии;
  2. Панель поиска, прикреплённая к верху страницы.

Для переключения состояния мы будем менять только класс элемента. Нет, нет, никаких двух копий форм...

Исходное состояние

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

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 60px;
}

.search { /* Контейнер для поля поиска и прочей информации */
  position: absolute;
  top: 155px;
  left: 20px;
  right: 20px;
  input {
    width: 265px;
    transition: width 0.2s;
    -webkit-appearance: none; /* Авто-подстановка префикса игнорируется */
  }
}

.top {
  height: 250px; /* Размер для поля поиска */
  padding-top: 40px;
  position: relative;
}

Состояние при прокрутке страницы

Присвоим класс “fix-search” для родительского элемента.

.top-header {
  ...
  .fix-search & {
    background: #eee;
  }
}
.search {
  ...
  .fix-search & {
    position: fixed;
    top: 10px;
    input {
      width: 250px;
    }
  }
}

Переключение состояний

Переключать состояние поисковой панели нужно при наступлении определённых событий: прокрутке страницы вниз. Для упрощения JavaScript кода, воспользуемся jQuery:

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }

});

Если страница была прокручена вниз на 147 и более пикселей, то мы присваиваем класс поисковой панели. Если вы движетесь вверх, класс исчезает (потому что эта функция вызывается при прокрутке страницы).

Демо

Интерактивный пример можете найти на CodePen

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://css-tricks.com/scroll-fix-content/
Перевел: Станислав Протасевич
Урок создан: 28 Октября 2014
Просмотров: 87819
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 31 Октября 2014 18:29
    mr_firuzinho
    А как сделать что бы после фиксации , ниже существующие блоки исчезли, как на сайте znanija.com{левый сайдбар}
  • 11 Января 2016 20:58
    Zlatov
    Большое спасибо!!! Тонны сайтов предлагают абсолютно тупой скрипт фиксирования после прокрутки например 100 пикселей и не учитывают что контент ДО элемента фиксации может быть динамичным по высоте...
^ Наверх ^