title: Jquery mousewheel event not working on mobile
body: <p>using mousewheel for a hero header effect and it is not working on mobile. touch scrolling is scrolling the content behind the hero header and not triggering the mousewheel effect... any ideas how to fix this would be much appreciated!! </p>
  
  <pre><code>$('.sd').click(function () {
      $('.hero, .content').addClass('scrolled');
  });
  
  $('.hero').mousewheel(function (e) {
      if (e.deltaY &lt; 0) {
          $('.hero, .content').addClass('scrolled');
          return false;
       }
  });
  $(window).mousewheel(function (e) {
      if ($('.hero.scrolled').length) {
          if ($(window).scrollTop() == 0 &amp;&amp; e.deltaY &gt; 0) {
              $('.hero, .content').removeClass('scrolled');
          }
      }
  });
  </code></pre>
  
  <p>CSS BELOW: not sure if its something in the CSS that is the issue, so have included it below. I am wondering if may have something to do with positioning or z-index but can't be sure... </p>
  
  <pre><code>.hero{
      height: 100vh;
      width: 100%;
      position: fixed;
      top: 0;
      z-index: 9;
  
      transition: all 1.6s cubic-bezier(0.86, 0, 0.07, 1);
              @media (max-width: 740px){
              height: 100vh;
              z-index: -1;
          }
  }
  .hero.scrolled{
      transform: translate3d(0, -100%, 0) scale(.75);
      opacity: 0;
  }
  .hero-inner{
      background-image: url(../../assets/plymouth.jpg);
      background-size: cover;
      background-position: center;
      // display: table;
      // width: 100%;
      // height: 100vh;
      // position: fixed;
      // top: 0;
      display: flex;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left:0;
      justify-content: center;
  
  }
  .hero-title{
      // display: table-cell;
      // vertical-align: middle;  
      // text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      // margin-top: 10%;
  }
  h1, h2, h3, h4, h5, h6{
      font-family: montserrat;
  }
  .font-2{
      font-family: 'josefin sans';
      font-weight: 700;
  }
  .title{ letter-spacing: .3em; text-transform: uppercase; }
  .text-light{ color: #fff }
  .font-alt{
      font-family: 'georgia';
      font-style: italic;
      color: #666;
  }
  .hero{
      overflow: hidden;
      z-index: 1;
  }
  .content{
      position: relative;
      background-color: #fff;
      // border-top: 1rem solid black;
      padding: 0; 
      margin-top: 2rem;
      transition: all 1.6s cubic-bezier(0.86, 0, 0.07, 1);
      transform: translate3d(0, 20px, 0) scale(.75);
      opacity: 0;
  }
  .content.scrolled{
      transform: translate3d(0, 0, 0) scale(1);   
      opacity: 1;
  }
  .sd{
      color: #fff;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
  }
  .sd:hover, .sd:focus{
      color: #fff;
      opacity: .7;
      text-decoration: none;
  }
  </code></pre>