HelenaS
@HelenaS

Как сделать, что бы хедер при скролле не наезжал на контент?

Здравствуйте!

Суть проблемы - есть "липкий" хедер. При переключении на ссылки, он наезжает на область контента и перекрывает её на свою высоту.
$(window).scroll(function() {
                var top = $(document).scrollTop();
                if (top < 650) $(".header-content").css({top: '0', position: 'relative'});
                else $(".header-content").css({top: '0px', position: 'fixed'});
            });

Скрипт вот такой.
Вопрос - как мне сделать, что бы хедер при скроле появлялся перед контентом, а не в контенте?
Заранее спасибо за помощь.
  • Вопрос задан
  • 1662 просмотра
Решения вопроса 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
когда задаешь fixed для хедера - у ниже стоящего блока делай padding-top на высоту твоего хедера.
типа так:
$(window).scroll(function() {
                var top = $(document).scrollTop();
                if (top < 650) {
                     $(".header-content").css({top: '0', position: 'relative'});
                     $(".under-header").css('padding-top', 0);
                }  else {
                    $(".header-content").css({top: '0px', position: 'fixed'});
                    $(".under-header").css('padding-top', headerHeight);
                }
            });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект