Sticky Header in SPFx webpart

Question

I have a SPFx webpart where I am using "DetailsList" to bind search data, I want to make header sticky while person scrolls the webpart, I have a search bar then dropdown and then grid in place, so how to add sticky header for only grid. Below goes my Details list added sticky but does not worked.

<div className={styles.row}>      
    <div className={styles.msCol}>
        <DetailsList
        items={FormattedArrayForDetailsList(items)}
        compact={true}
        columns={columns}
        className={styles.documentsList}
        constrainMode={ConstrainMode.unconstrained}
        selectionMode={SelectionMode.single}
        //disableSelectionZone={true}
        checkboxVisibility={CheckboxVisibility.always}
        getKey={this._getKey}
        setKey="set"
        layoutMode={DetailsListLayoutMode.fixedColumns}
        isHeaderVisible={true}
        selectionPreservedOnEmptyClick={false}
        enterModalSelectionOnTouch={true}
        ariaLabelForSelectionColumn="Toggle selection"
        ariaLabelForSelectAllCheckbox="Toggle selection for all items"
        selection={this._selection}
        onItemInvoked={this._onItemInvoked}
        onRenderMissingItem={this._onRenderMissingItem}
        onRenderDetailsHeader={
        // tslint:disable-next-line:jsx-no-lambda
        (detailsHeaderProps: IDetailsHeaderProps, defaultRender: IRenderFunction<IDetailsHeaderProps>) => (
        <Sticky>
        {defaultRender(detailsHeaderProps)}
        </Sticky>
        ) }
        //enableShimmer={!isDataLoading}
        />
    </div>
</div>