当div被点击时，使粘头扩展

Question

我有一个粘性头，这是我在互联网上找到的javascript。该脚本工作得很好，但我想添加一个额外的功能。点击图标时，我希望页眉展开，并且每当页面再次滚动时再次收起。 问题是，我只有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> 

它工作起来像魔术（正是我想要的）。虽然我真的不知道JavaScript，所以我会很感激，如果有更有经验的人检查过，并让我知道是否有什么问题。

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