Add a class to the header after the user scrolls, then style it with CSS. Replace .site-header with your theme header selector.

main.js

var header = document.querySelector( '.site-header' );

if ( header ) {
    window.addEventListener( 'scroll', function () {
        header.classList.toggle( 'is-sticky', window.scrollY > 100 );
    }, { passive: true } );
}

CSS

.site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}