Фиксация блока при прокрутке

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

"Залипание" блока можно сделать гораздо проще, воспользовавшись небольшим скриптом на jQuery или всего одним свойством на CSS

Вариант на CSS (position: sticky):

Для фиксации блока таким способом достаточно просто добавить нужному элементу свойство position: sticky

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

Вариант на jQuery (position: fixed):

Данный вариант на JS c библиотекой jQuery немного сложнее, но более гибкий. Например, можно изменить фон у "залипшего" блока

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Александр:

    это устанавливается в браузер или на сайт

    Ответить
  • Денис:

    Возможно прикрутить к блоку кнопку закрыть?

    Ответить
    • Alexander:

      Закрыть фиксированный блок?
      Можно конечно, если на CSS, то например, через checkbox, а на JS через клик скрыть блок.

      Ответить
  • insider:

    Спасибо, на css офигенно просто)

    Ответить