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

 position: sticky;

     top: 0;

     z-index: 1;

 

     display: block;

 

     background: #FF5714;

     width: 100%;

     height: 75px;

     transition: width 1s linear;

<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>