"How to make a header fixed while content is scrolled in jquery bootgrid "

Question

I am trying to make header fixed while the main content is scrolled in jquery bootgrid. how to make header fixed in its position?.

here is my code

    <div class="table-responsive" style="display:block;height:500px;overflow:scroll ;width:100%;">

            <table id="grid-data" class="table  table-bordered  table-sm table-striped table-hover " data-selection="true" data-multi-select="true" data-row-select="true" data-keep-selection="true">
                <thead>
                    <tr>
                        <th data-column-id="ItemCode" data-sortable="false">Item Code</th>
                        <th data-column-id="ItemDescription" data-sortable="false">Item Description</th>
                        <th data-column-id="UnitName" data-formatter="UnitName" data-sortable="false">Unit Name</th>
                        <th data-column-id="QOH" data-formatter="Quantity" data-sortable="false">Quantity</th>
                        <th data-column-id="MaterialCost" data-formatter="Price" data-sortable="false">Price</th>
                        <th data-column-id="RowNumber" data-formatter="Amount" data-sortable="false">Amount</th>

                    </tr>
                </thead>

            </table>

        </div>