Как фиксировать шапку страницы при скролле?

Question

[abylalikkkk]

Как фиксировать url шапку при скролле как в телеграме, тоесть при скролле вниз на моем сайте url шапка браузера прыгает вверх, а в телеграме при скролле оно остаётся на месте

Comments

[Александр]

position: sticky или position: fixed

Answer 1

[Иван Журавлев]

Для блока который нужно фиксировать задаёте position: fixed (+ top, right, bottom, left при необходимости). Для контейнера в котором находится фиксированный элемент (или body) задаёте padding-top равный высоте фиксированного элемента.
Данные свойства можно назначать элементам динамически с помощью JavaScript или jQuery, если у вас адаптивный дизайн.

window.addEventListener('resize', function(event) {
    ...
}, true);

или

window.onresize = function(event) {
    ...
};

Внутри данных функций при загрузке страницы (см. addEventListener('DOMContentLoaded')) обычно я высчитываю высоту фиксируемого блока и потом назначаю этот размер для padding-top нужного мне родителя. Это позволяет корректно отображать контент при изменении ширины окна.
На основе этой идеи также делается "липкий блок", когда нужно, чтобы элемент становился фиксированным при перелистывании страницы в определённый момент. Здесь стоит использовать cвойство scrollTop.