title: jQuery mousewheel detect scroll up and down
body: <p>I have a few sections (each of size 100% x 100% - Fullscreen), which are fixed and overlapped on top of one another using z-index. I want to detect the mouse scroll and display respective sections using jQuery (Basically, something like fullpage.js but I will have different animations). I read many questions and tried the following code, but doesn't work.</p>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function(){
      sections=["intro","features","gallery","contact"]
      cs=0;
      $(window).on('mousewheel DOMMouseScroll', function(e){
          if(e.originalEvent.detail &gt; 0) {
              //scroll down - Show next section
              if(cs &lt; (sections.length-1)){
                  $("#"+sections[cs]).fadeOut();
                  cs+=1;
                  $("#"+sections[cs]).fadeIn();
              }
          }
          else{
              //scroll up - Show previous section
              if(cs &gt; 0){
                  $("#"+sections[cs]).fadeOut();
                  cs-=1;
                  $("#"+sections[cs]).fadeIn();
              }
          }
          return false;
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section id="intro"&gt;
      &lt;div class="content"&gt;
          &lt;h1&gt;Intro&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section id="features"&gt;
      &lt;div class="content"&gt;
          &lt;h1&gt;Features&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section id="gallery"&gt;
      &lt;div class="content"&gt;
          &lt;h1&gt;Gallery&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section id="contact"&gt;
      &lt;div class="content"&gt;
          &lt;h1&gt;Contact Us&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>To see the whole code, in case you need it, <a href="https://github.com/lightofindia1/swing" rel="nofollow noreferrer">visit github</a></p>