Липкий переход заголовка становится скачкообразным и уродливым при прокрутке вниз

Question

Проверьте титульную страницу https://www.belkita.com. Если вы прокрутите вниз медленно, вы можете проверить, как в определенный момент он становится нервным и уродливым, когда должен быть плавный переход к меньшему заголовку.

Код JavaScript, который я использую:

<script>
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};


function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("header-sidebar").style.display = "none";
        document.getElementById("masthead").style.height = "80px";
    document.getElementsByClassName("custom-logo")[0].style.maxWidth = "130px";

  } else {
        document.getElementById("header-sidebar").style.display = "block";
        document.getElementById("masthead").style.height = "140px";
      document.getElementsByClassName("custom-logo")[0].style.maxWidth = "230px";
  }
}
</script>

Answer 1

Существует проблема с вашим условием:

 if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50)

ваше первое условие никогда не выполняется, document.body.scrollTop всегда оценивается в 0. Ваше второе условие активируется, а затем размер баннера уменьшается,когда размер баннера уменьшается, второе условие больше не выполняется и размер баннера увеличивается. как только он увеличивается, условие проходит снова и т. д. в цикле.

Answer 2

Это шатко, потому что ваша боковая панель заголовка div # отображается: нет;при прокрутке вниз.

Также добавьте класс, если scrollTop> 50 вместо встроенного стиля, потому что остальное - просто стиль CSS.

например:

/* scrolled >50px */
#masthead.scrolledEnough {
    top: 0;
    left: 0;
    right: 0;
}

//scrolled <50px
#masthead .notEnough {
    top: 30px;
}