JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,fh-3.0.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/jq-2.1.4,dt-1.10.9,fh-3.0.0/datatables.min.css">
  	<div class="container">
    <section>
        <h1>FixedHeader example <span>Offset</span></h1>
        <div class="info">
            <p>In this example we have a fixed position element at the top of the page and</code>fixedHeader.headerOffset</code>is used to ensure that the FixedHeader takes this into account.</p>
            <p style="color:red">But if the header height changes, the table header needs to be fixed to new position (so that table header sticks to the edge of the header, without overlapping it). For this I need to change the headerOffset of the existing FixedHeader.</p>
            <p style="color:blue">Press "toggle header size" button and scroll the table.</p>
            <button id="simulateNavbarResize">toggle header size</button>
            <!-- enable/disable not available in V3.0.0, need V3.0.1-dev to work 
            <button id="disable">disable fixed header</button>
            <button id="enable">enable fixed header</button>
          -->
            <div id="fixed" style="position:fixed; background-color:#4E6CA3; top:0; right:0; left:0; height:20px; z-index:1"></div>
        </div>
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                </tr>
                <tr>
                    <td>Airi Satou</td>
                </tr>
               ...

JavaScript

$(document).ready(function () {
    $('#example').DataTable({
        lengthChange: false,
        searching: false,
        pageLength: 55,
        paging: false,
        fixedHeader: {
            header: true,
            headerOffset: $('#fixed').height()
        }
    });
    // change header height
    $("#simulateNavbarResize").on("click", function (e) {
        $('#fixed').height(100 - $('#fixed').height());

        var table = $('#example').DataTable();
        // DO SOMETHING HERE TO UPDATE fixedHeader.headerOffset
        table.fixedHeader.adjust();
    });
    // disable
    $("#disable").on("click", function (e) {
        var table = $('#example').DataTable();
        table.fixedHeader.disable(); // requires V3.0.1-dev
    });
    // enable
    $("#enable").on("click", function (e) {
        var table = $('#example').DataTable();
        table.fixedHeader.enable(true); // requires V3.0.1-dev
    });
});