Shrinking header code aanpassing

Hallo,

Ik heb een header die fixed is en shrinked en achtergrondkleur krijgt bij het scrollen. Alleen als de pagina reload dan is de styling weg. Hoe kan ik ervoor zorgen dat de styling ook nog blijft toegepast na reload?

jQuery(function( $ ){

	$(".site-header").after('<div class="bumper"></div>');

	$(window).scroll(function () {
		if ($(document).scrollTop() > 50 ) {
			$('.site-header').addClass('shrink');
		} else {
			$('.site-header').removeClass('shrink');
		}
	});

}); 

Ik had dit bericht gevonden, maar hoe moet ik dat nou toepassen, want krijg het niet werkende op een of andere manier.

$(window).on('load scroll resize orientationchange', function () {