Как добавить в таблицу jscrollpane

$(document).ready(function () { 
  window.onload = function(){ 
    var tableCont = document.querySelector('#table-cont') 
    /** 
     * scroll handle 
     * @param {event} e -- scroll event 
     */ 
    function scrollHandle (e){ 
      var scrollTop = this.scrollTop; 
      this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)'; 
    } 
 
    tableCont.addEventListener('scroll',scrollHandle) 
  }; 
   
    $('.scroll-pane').jScrollPane({ 
        showArrows: false, 
        contentWidth: '0px', 
        autoReinitialise: true 
    }).bind( 
        'mousewheel', 
        function(e) 
        { 
            e.preventDefault(); 
        } 
    ); 
 
   
});

.table-cont{ 
  /**make table can scroll**/ 
  max-height: 200px; 
  overflow: auto; 
  /** add some style**/ 
  /*padding: 2px;*/ 
  background: #ddd; 
  margin: 20px 10px; 
  box-shadow: 0 0 1px 3px #ddd; 
} 
thead{ 
  background-color: #ddd; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/style/jquery.jscrollpane.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script> 
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/script/jquery.jscrollpane.js"></script> 
 
<h1 >132 qwe 123qwe </h1> 
  <div class='table-cont scroll-pane' id='table-cont'> 
   <table class="table table-striped"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>First Name</th> 
          <th>Last Name</th> 
          <th>Username</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <th scope="row">1</th> 
          <td>Mark</td> 
          <td>Otto</td> 
          <td>@mdo</td> 
        </tr> 
        <tr> 
          <th scope="row">2</th> 
          <td>Jacob</td> 
          <td>Thornton</td> 
          <td>@fat</td> 
        </tr> 
        <tr> 
          <th scope="row">3</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">4</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">5</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">6</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">7</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">8</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">9</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">10</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">11</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">12</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
        <tr> 
          <th scope="row">13</th> 
          <td>Larry</td> 
          <td>the Bird</td> 
          <td>@twitter</td> 
        </tr> 
      </tbody> 
    </table> 
  </div>