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