Fixed Header with ScrollX

I am unable to get FixedHeader to work with a datatable that is wide and requires horizontal scrolling. I instantiate the datatable like so

table = $('#dataTable').DataTable({
                dom: 'Bfrtip',
                processing: true,
                data: dataSet,
                scrollX: true,
                fixedHeader: true

This inserts the fixed header properly but when I scroll left and right the header stays the same. So I had to tweak the code to make the header move when I scroll right and left.

table = $('#dataTable').DataTable({
                dom: 'Bfrtip',
                processing: true,
                data: dataSet,
                scrollX: true,
                fixedHeader: true,
                "initComplete": function (settings, json) {

                    $('.dataTables_scrollBody').on('scroll', function () {
                        $('.dataTables_scrollHeadInner').scrollLeft($(this).scrollLeft());
                    });

                    $(document).on('scroll', function () {

                        var scroll_pos = $(this).scrollTop();
                        var margin = $('.dataTables_scrollHead').offset().top;
                        var cur_pos = $('.dataTables_scrollHeadInner').position();
                        var header_pos = cur_pos.top;

                        if (scroll_pos < margin)
                            var header_pos = margin - scroll_pos;
                        else
                            header_pos = 0;

                        $('.dataTables_scrollHeadInner').css({ "top": header_pos });
                    });
                }

This along with some css

table.dataTable.fixedHeader-floating {
            display: none !important;
        }

        .dataTables_scrollHeadInner {
            margin-left: 0px;
            width: 100% !important;
            position: fixed;
            display: block;
            overflow: hidden;
            margin-right: 30px;
            background: white;
            z-index: 1000;
        }

        .dataTables_scrollBody {
            padding-top: 60px;
        }

Almost does what I want, except for two issues. One there is an empty header on my datatable below the fixed header. Even though it does not have any information in the row it places the sorting arrows one line below so essentially the first 2 rows of the table have sort arrows, which looks bad.

I fixed this with some javascript, but whenever I use the sort arrows on the fixed header the arrows that I removed from the body of the table return.

I have honestly spent too much time on this, is this any solution to have fixed header that scroll horizontally with the table without having to write a ton of css.