title: Javascript - execute multiple different window.onscroll
body: <p>I am facing a little problem here. I have basic knowledge about Javascript and i want to do the following:</p>
  
  <p>Right now, when you scroll down, the menu will get smaller. when you go back up, it will return to normal. I call this event with window.onscroll:</p>
  
  <pre><code>var diff = 0;
  function effects(){
  var topDistance = (document.documentElement &amp;&amp;     document.documentElement.scrollTop) ||  document.body.scrollTop;
  var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  
  if(topDistance &gt; diff){ 
      diff = topDistance;
      if(clientWidth &gt; 1024){
          if(topDistance &gt; 300){
              document.getElementById("header").style.marginTop= "-100px";
          }
      }
  }else if(topDistance &lt; diff){
      diff = topDistance;
      if(clientWidth &gt; 1024){
          if(topDistance &gt; 300){
              document.getElementById("header").style.marginTop= "0";
          }
      }
  }
  }
  
  window.onscroll = effects();
  </code></pre>
  
  <p>Now i want another function to have some effects to my call to action buttons, lets call the function "test", but if i want to do this the same way like above, the effects functions does not work anymore:</p>
  
  <pre><code>function test(){
  //do something
  }
  window.onscroll = test();
  </code></pre>
  
  <p>Any help is welcome! I tihnk it won't be a big challenge to do this, but i am doing it wrong i guess. (PS: NO JQUERY PLEASE)</p>