Ag-grid sticky header

So my ag-grid resize itself because my row height is also dynamic. So for height I am using [style.height.px]="beta" and this.beta = document.getElementsByClassName('ag-full-width-container')["0"].offsetHeight + 139 And the pagination is set to 100.

I cannot use autoHeight because I have more than 10k rows. So I want my header to be sticky. I have some content before ag-grid in DOM. As I scroll I want my ag-grid header to stick to the top. I am using top:0;position:sticky;z-index:1000 It's working for every div tag except ag-gird's div tag. So is there a way to have a sticky header in ag-grid?

On onGridViewChanged() function I implemented the following logic. So in this logic the HTML above ag-gird in DOM should be consider for top because ag-grid header top was 0 for me. And then add some value according to your requirement (calibration). Then for the row body add some margin (calibration).

    onGridViewChanged() {
        let header = $('.ag-header')
        let headerPos = $('.btn-row').position().top + 50
        $(window).on("scroll", function () {
            if ($(window).scrollTop() > headerPos) {
                header.css("position", "fixed").css("top", 0).css("z-index", "99");
                $('.ag-body-viewport.ag-layout-normal').css("margin-top", "88px");
            }
            else {
                header.css("position", "static");
                $('.ag-body-viewport.ag-layout-normal').css("margin-top", "0px");
            }
        });
    }