중복 된 html 헤더 Javascript 버그 수정?

Question

좋아, 스크롤 할 때 크기를 조정하는 헤더를 구현하려고했지만 그 외에도 Headroom이라는 다른 솔루션을 추가 했으므로 머리글 숨기기까지 제대로 작동하도록했습니다. 내 충만 함을 볼 수 있습니다. HERE. 처음으로 알아 차리면 결함이없고, 45px의 작은 머리글로 부드럽게 크기가 조정 된 다음 헤드 룸이 머리글을 활성화하고 숨 깁니다. 그러나 두 번째 또는 다른 시간 후에는 부드럽게 크기가 조정되지 않고 오히려 고장 나거나 작은 머리글로 점프 한 다음 헤드 룸이 활성화되므로 스크롤 할 때 항상 부드럽게 크기를 조절할 수 있습니다. 이 (shrinkOn은 = 50) 다음 헤드 룸 자신을 숨 깁니다에서 작은가는 것을 (당신은 허용 오차가있는 헤드 룸 코드에서 볼 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> 

헤더를 축소 스크립트입니다 헤드 룸 활성화 스크립트

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, 

감사 옵션입니다! 당신이 시작하면

Answer 1

기본적으로, 헤더에 당신의 클래스는 다음과 같습니다 당신이 전환을 통해 갈 때, 당신은 smaller를 추가하고, headroom--top을 제거 headroom headroom--top

, headroom--not-top로 교체하고 headroom--unpinned를 추가. 그래서 두 번째 줄 :

headroom smaller headroom--top headroom--pinned 

그리고 결말 : 다음

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

전이를 통해 다시가는, 당신은 headroom--pinned와 headroom--top 및 headroom--unpinned와 headroom--not-top 전환 한 다음 headroom--pinned을 제거 결코 smaller를 제거하지만, 이것은 초기 상태로 돌아 가기 위해해야 ​​할 일입니다.

그래서, 여기에 결말은 스크립트에서이 줄을 추가하는 것입니다

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

여기를보세요 : 최고 Your forked codepen