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