title: Allow Scrolling in DIV when hovering a fixed element
body: <p>I have a container <code>div</code> with a <code>button</code> and a car <code>img</code> inside of it. The car moves when the page is scrolled.</p>
  
  <p>When the mouse is hovering over top of the <code>button</code> or <code>img</code>, the scroll wheel no longer works.</p>
  
  <p>I tried adding a gray overlay <code>div</code> to block the <code>hover</code> on the button and car. But this prevents the button from being clicked.</p>
  
  <p>Is there a way to make scrolling work even when the button or image is hovered?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#home').on('scroll', function() {
  
   var dist = $(this).scrollTop();
  
   $('#cars').css('left', dist / 2);
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    position : absolute;
    height: 90%;
    width: 90%;
    background: #fff;
  }
  #overlay {
   height: 1200px;
   background-color: rgba(255,255,255,0.7);
   z-index: 999;
   position: relative;
   pointer-events: none;
  }
  #buttons {
    width: 150px;
    height: 40px;
    background-color: yellow;
    position: fixed;
    text-align: center;
    z-index: 5;
    cursor: pointer;
  }
  #home {
   
      position: relative;
      top:0px;
      width: calc(100% + 25px);
      overflow-y: scroll;
      background-image: url('images/movie_6.jpg');
     height: 400px;
      background-color: #000000;
      margin-top: 40px;
  
  
  }
  #homeinner {
   height: 1800px;
   overflow: hidden;
  }
  #cars {
    height: 50px;
    position: fixed;
    top: 100px;
    left: 0;
  }
  
  #bar {
    height: 80px;
    width: calc(100% + 25px);
    position: absolute;
    background-color:red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section id="home"&gt;
    &lt;div id="homeinner"&gt;
     
      &lt;button id="buttons" onclick="alert('Log in page!')"&gt;
  button
      &lt;/button&gt;
      &lt;img id="cars"   src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" /&gt;
    
    &lt;div id="overlay"&gt;
     
     &lt;/div&gt;
     &lt;/div&gt;
  
  &lt;/section&gt;
  
  &lt;div id="bar"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>