Уменьшить шапку при прокрутке на чистом JavaScript

0 из 5, голосов: 0
125
Логика скрипта такая:

1) Тегу header присваиваем id="header".

2) В css-файле прописываем стиль для большой шапки header_big и стиль для уменьшенной шапки header_small.

3) Перед тегом </body> вставляем JavaScript, который при скролле больше 0 меняет у элемента с id="header" стиль на header_small (шапка уменьшается), а при скролле равным 0, меняет стиль у этого же эелемента на header_big (шапка увеличивается).
HTML-код этого примера: В коде показана только шапка. Главный момент - это id="header" у тега header.
По этому ID javascript уменьшает размер логотипа и фон в шапке, если обнаружил, что скролл больше 0.


<header id="header" class="header_big">

<section>

<div class="main-table" style="padding-top:10px;">

<div class="cell-table" id="logo_header">
<a href="/"><img src="img/logo.png"></a>
</div>

<div class="cell-table">
<div class="phone_border">
Звоните ежедневно<br>
<span class="header_link_ico" style="background-image:url(img/tel.png);"></span>
<a class="phone" href="tel:+79031112233">8(903)111-22-33</a>
</div>
</div>

<div class="cell-table">
<div class="phone_border">
Звоните и пишите: <span style="color:#149508;font-weight:bold;">WhatsApp</span><br>
<span class="header_link_ico" style="background-image:url(img/wa.png);"></span>
<a class="wa" href="https://api.whatsapp.com/send?phone=79031112233" target="_blank" rel="nofollow">
8(903)111-22-33</a>
</div>
</div>

</div>

</section>

</header>

В css-файле мы закрепляем шапку директивой position: sticky;.
Изначально шапке назначается class="header_big".
В css-файле описан так же class="header_small", который уменьшает логотип в шапке и ставит другой фон.


#header {position: sticky; top: 0; z-index:12;}

/*РАЗМЕР ЛОГОТИПА В БОЛЬШОЙ ШАПКЕ*/
.header_big #logo_header img {max-width: 340px; width: 100%;}
/*ФОН В БОЛЬШОЙ ШАПКЕ*/
.header_big {background-image:url("img/bg-header-big.jpg"); border-bottom: 2px solid #03276b;}

/*РАЗМЕР ЛОГОТИПА В МАЛЕНЬКОЙ ШАПКЕ*/
.header_small #logo_header img {max-width: 220px; width: 100%;}
/*ФОН В МАЛЕНЬКОЙ ШАПКЕ*/
.header_small {background-image:url("img/bg-header-small.jpg"); border-bottom: 2px solid #03276b;}



/*ДАЛЬШЕ ИДУТ СТИЛИ, КОТОРЫЕ НАПРЯМУЮ НЕ УМЕНЬШАЮТ ШАПКУ, НО ИСПОЛЬЗОВАНЫ В ШАПКЕ*/
/*ЯЧЕЙКИ С КЛАССОМ CELL-TABLE В ДЕСКТОПНОЙ ВЕРСИИ РАСПОЛАГАЮТСЯ В СТРОЧКУ*/
/*А В МОБИЛЬНОЙ ВЕРСИИ ЯЧЕЙКИ С КЛАССОМ CELL-TABLE СТАНОВЯТСЯ ДРУГ ПОД ДРУГОМ*/
.main-table {width:1200px; display: table; margin: 0 auto 10px;}
.cell-table {display: table-cell; text-align: center; vertical-align: middle; padding: 1px;}

@media screen and (max-width: 720px) {
.main-table {width:100%; display: table; margin: 0 auto 10px;}
.cell-table {display: block; margin: 0; text-align:center; width:100%;}
}
Перед закрывающим тегом </body> необходимо разместить чистый javascript.
Этот javascript отслеживает положение скролла.
Если скролл больше 0, то в шапке он меняет class-стиль из header_big на header_small и шапка уменьшается.
А если скролл стал равным 0, скрипт меняет class-стиль обратно: из header_small на eader_big и шапка увеличивается.


<script>

window.addEventListener('scroll', trackscroll);//после каждого скролла запускаем функцию "trackscroll"

function trackscroll()
{
//переменной header присваиваем элемент с id "header"
let header = document.getElementById('header');
//если есть скролл, то удаляем название класса "header_big" и добавляем название класса "header_small" - делаем шапку маленькой
if (window.pageYOffset > 0) {header.classList.remove('header_big'); header.classList.add('header_small');}
//если ползунок на самом верху, то наоборот - удаляем название класса "header_small" и добавляем название класса "header_big" - делаем шапку большой
else {header.classList.remove('header_small'); header.classList.add('header_big');}
}

</script>



[0.008113]