Сделать липкий заголовок расширяться при нажатии на 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> 

Это работает как магия (именно так я хочу). Хотя я действительно понятия не имею о 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();