div를 클릭 할 때 끈적한 헤더가 확장됩니다.

Question

인터넷에서 javascript로 발견되는 끈적한 헤더가 있습니다. 스크립트는 정상적으로 작동하지만 추가 기능을 추가하고 싶습니다. 아이콘을 클릭하면 머리글을 확장하고 페이지를 다시 스크롤하여 다시 철회합니다. 문제는 자바 스크립트에 대한 기본 경험이 있고 추가 코드를 추가해야한다는 것입니다. 나는 여러분 중 일부가 나를 도울 수 있기를 바랍니다.

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"); 
     } else { 
      if (classie.has(header,"smaller")) { 
       classie.remove(header,"smaller"); 
      } 
     } 
     }); 
} 
window.onload = init(); 

Answer 1

뭔가를 시도 할 수 있습니다 나는 다음과 같은 솔루션에왔다.

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

정확하게 (내가 원하는 방식으로) 작동합니다. 나는 자바 스크립트에 대해 아무런 생각이 없기 때문에 경험이 많은 사람이 체크하고 뭔가 잘못되었을 때 알려주는 것에 감사 할 것입니다.

Answer 2

당신은 스크린 뒤에 또 다른 일이

function init() { 
var distanceY = window.pageYOffset || document.documentElement.scrollTop, 
       shrinkOn = 50, 
       header = document.querySelector("header"); 
    window.addEventListener('scroll', function(e){ 

     if (distanceY > shrinkOn) { 
      classie.add(header,"smaller"); 
     } else { 
      if (classie.has(header,"smaller")) { 
       classie.remove(header,"smaller"); 
      } 
     } 
     }); 

     document.getElementById("yourdiv").addEventListener('click', function(e){ 
       if (classie.has(header,"smaller")) { 
       classie.remove(header,"smaller"); 
      } 
     }); 
} 
window.onload = init();