Как сделать фиксированный хеадер c изменением размера при прокрутке.

Последние время всё чаще поступают просьбы для "прикручивания"  к сайтам фиксированных или "липких" хеадеров. Ниже я приведу 2 метода реализации, где хеадер будет изменяться в размерах. В обоих случаях будет использован фреймворк Jquery.  

Метод первый.

Используеться если информация в большом и малом хеадере отличаются. Как пример можно наблюдать на моём сайте.

Создано 2 элемента, где первый скрывается в случае прокрутки или наоборот появляется. Высота при которой скрывается верхний блок 114px.

<script>
jQuery("document").ready(function($) {
 $(window).scroll(function(){
 if($(this).scrollTop()>114) {
    $("#menu_hide").hide()
   }
     else {$("#menu_hide").show() 
   }
 }
});
</script>

Код HTML:

 <header>
  <div id="menu_hide">
   // Блок №1 в моём случае логотип, название и слоган сайта
   // это элемент скроется 
  </div>

  <div>
    // Блок №2 в моём случае меню сайта
    // это элемент останется виден.
  </div>
</header>  

Метод второй.

В первом методе всё хорошо, но хотелось бы добавить анимации. Для этого воспользуемся CSS3 а именно свойство transition  для установления эффекта плавного изменения высоты хеадера.

 -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;

Для начала нужно настроить стиль хеадера

header{
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }

Следующим этапом будет использование небольшого скрипта, который добавить новые правила в css хеадера. 

<script>

$(window).scroll(function() {

    if ($(this).scrollTop() > 1){  

        $('header').addClass("sticky");

    }  else{

        $('header').removeClass("sticky");
    }

});

</script>  

Из кода видно что скрипт сработает если прокутить страницу хотя бы на 1 пиксель вниз. Собственно осталось добавить новые правила css:

 

header.sticky {

            position: fixed;
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            width: 100%;
            background: #efc47D;
            text-align: left;
            padding-left: 20px;>
        }  

Вот и всё теперь можно видеть "липкую шапку" с эффектом скольжения.Исходники второго метода прикреплены ниже

Демо

Прикреплённые файлы
my_header.rar2.41 КБ
Sam 10 мая, 2016

У вас в первом примере не хватает закрывающей скобки для функции ("document").ready (9-ая строка). Но за пример спасибо)

Keha 04 мая, 2017

ну или использовать друпал-модуль stickynav

Оставить комментарий

Похожие материалы