Bymas | Как изменить высоту блока во время прокрутки старницы

Обучение/Помощь новичкам | Как изменить высоту блока во время прокрутки старницы

Как изменить высоту блока во время прокрутки старницы, типа скролишь вниз и чтобы блок стаовился чуть-чуть меньше ?

css

   position: sticky;     top: 0;     z-index: 1;      display: block;      background: #FF5714;     width: 100%;     height: 75px;     transition: width 1s linear;

html

   <style>   .sticky-header {     position: sticky;     top: 0;     z-index: 1;     display: block;     background: #FF5714;     width: 100%;     height: 75px;     transition: all 0.3s ease; /* Изменил на 'all' и уменьшил время для плавности */   }      .sticky-header.small {     height: 50px; /* Новая высота при скролле */   } </style>  <div class="sticky-header" id="stickyHeader"></div>  <script>   window.addEventListener('scroll', function() {     const header = document.getElementById('stickyHeader');     if (window.scrollY > 50) { // Изменяем высоту после прокрутки на 50px       header.classList.add('small');     } else {       header.classList.remove('small');     }   }); </script>

Форум На главную