Фиксируем блок в процессе вертикальной прокрутки (css, jquery)

Решил для себя записывать некоторые готовые решения, которые применяю в повседневности, для этого обновляю рубрику программирование.

По большей части это не совсем программирование, а скорее разметка, код, верстка, в общем клиентская часть. Итак на заметку jQuery код, меняющий класс блока на fixed если меняется значение прокрутки по вертикали более чем на 333 пикселя.

Это необходимо для реализации фиксирования блоков при изменении разрешения экрана. Очень удобная штука.

  1. $(window).bind('scroll', function() {
  2. if ($(window).scrollTop() < 333) {
  3. $('.menu').addClass('fixed');
  4. }
  5. else
  6. {
  7. $('.menu').removeClass('fixed');
  8. }
  9. });

Пример реализации, блок фильтрации на сайте stamp-collection.ru

При изменении прокрутки на 333 пикселя по вертикали, блоку присваивается класс fixed

  1. .fixed{
  2. position: fixed; top: 0px;
  3. }

Что фиксировано позиционирует блок относительно верхней границы видимой области браузера, при изменении прокрутки на 333 пикселей.