How to inject div in JSF datatable excluding header - jsf

Question

I have added a custom scrollbar in my JSF datatable and it looks like that:
My code is this:
<div class="verticalScrollbar" style="max-height:330px;">
<h:dataTable var="entity" value="#{entityBean.entities}"
styleClass="datatable"
headerClass="datatable-header"
rowClasses="datatable-odd-row,datatable-even-row">
<h:column>
<f:facet name="header">
<h:outputText value="Field 1" />
</f:facet>
<h:outputText value="#{entity.field1}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Field 2" />
</f:facet>
<h:outputText value="#{entity.field2}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Field 3" />
</f:facet>
<h:outputText value="#{entity.field3}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Field 4" />
</f:facet>
<h:outputText value="#{entity.field4}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Field 5" />
</f:facet>
<h:outputText value="#{entity.field5}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Field 6" />
</f:facet>
<h:outputText value="#{entity.field6}" />
</h:column>
</h:dataTable>
</div>
<script>
(function($){
$(window).load(function(){
$(".verticalScrollbar").mCustomScrollbar({
scrollButtons:{ enable:false },
horizontalScroll:false,
advanced:{ updateOnBrowserResize:true, updateOnContentResize:true }
});
});
})(jQuery);
</script>
The verticalScrollbar div contains the whole datatable including the header, so when I scroll down the table, I cannot see the header, like that:
How can I apply my scrollbar only to the body of the table excluding the header, so that the header stays still, while only the body scrolls down?