Блог

Хорошо, я пытался реализовать заголовок, размер которого изменяется при прокрутке, НО я также добавил к нему другое решение под названием Headroom, я заставил его работать просто отлично, пока заголовок скрывается. Вы можете увидеть мой прогресс ЗДЕСЬ.Если вы заметите, что в первый раз, когда вы это делаете, вы не видите сбоя, он плавно изменяется до меньшего размера заголовка в 45 пикселей, а затем headroom активируется и скрывает заголовок. НО во второй или любой другой раз после этого он не изменяется плавно, а скорее дает сбои или ПЕРЕХОДИТ в меньший заголовок, а затем активируется headroom, я пытаюсь получить его там, где он всегда плавно изменяется при прокрутке (вы увидите, что он уменьшается при ( shrinkOn = 50) изатем скрывается с помощью headroom (в коде headroom вы увидите, что допуск равен 300)

Это скрипт, который сжимает заголовок

 <script>
      function init() {
          window.addEventListener('scroll', function(e){
             var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                  shrinkOn = 50,
                  header = document.querySelector("header");
        if (distanceY       
                       > shrinkOn)
  {                                                                                                                                                                                     
            classie.add(header,"smaller", "headroom");
        } else {
            if (classie.has(header,"smaller", "headroom")) {
                classie.remove(header,"smaller", "headroom");
            }
        }
    });
}
      window.onload = init();
  </script>
  

Это скрипт, который активирует Headroom

   var myElement = document.querySelector("header");
  // construct an instance of Headroom, passing the element
  var headroom  = new Headroom(myElement);
  // initialise
  headroom.init(); 
  

Это варианты

   "tolerance": 2,
  "offset": 350,
  

Заранее спасибо!

По сути, когда вы начинаете, ваши классы в заголовке: headroom headroom--top

По мере прохождения переходов вы добавляете smaller и удаляете headroom--top , заменяя headroom--not-top и добавляя headroom--unpinned . Итак, вторая панель:

 headroom smaller headroom--top headroom--pinned
  

И заканчивается на:

 headroom smaller headroom--not-top headroom--unpinned
  

Затем, возвращаясь к переходам, вы переключаетесь headroom--not-top с headroom--top помощью и headroom--unpinned с headroom--pinned помощью , а затем удаляете smaller , но никогда не удаляете headroom--pinned , что вам нужно сделать, чтобы вернуться к исходному состоянию.

Итак, результатом здесь является добавление этой строки в скрипт:

 ...snip
    classie.remove(header,"smaller", "headroom");
    classie.remove(header,"headroom--pinned", "headroom");  //add this line here
}
  

Посмотрите здесь:
Ваш разветвленный codepen