Make sticky header erweitern, wenn ein div geklickt wird

Question

Ich habe eine klebrige Header, die Javascript ich im Internet gefunden habe. Das Skript funktioniert gut, aber ich möchte ein zusätzliches Feature hinzufügen. Wenn ein Symbol angeklickt wird, möchte ich die Kopfzeile erweitern und immer dann, wenn die Seite erneut gescrollt wird, um sie wieder einzufahren. Das Problem ist, dass ich nur grundlegende Erfahrung mit Javascript habe und etwas zusätzlichen Code hinzugefügt werden muss. Ich hoffe, dass einige von Ihnen mir helfen können.

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

Einen weiteren Tag hinter dem Bildschirm und ich kam zu folgenden Lösung versuchen.

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

Es funktioniert wie Magie (genau wie ich will). Obwohl ich wirklich keine Ahnung von Javascript habe, werde ich dankbar sein, wenn jemand erfahrener es überprüft hat und lassen Sie mich wissen, wenn etwas falsch ist.

Answer 2

können Sie so etwas wie diese

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();