crazy live sizing with jquery on load / on viewport / on resize!

functions.php

/* fix topbar for demo */
add_action( 'wp_footer', 'atomion_fix_topbar' );

function atomion_fix_topbar() {
	?>
	<script>
	jQuery(document).ready(function( $ ) {

		var resizeTimer;

		if ( $( '.demo_store' ).length ) {
			var width = $(window).width(); 

			if ( width >= 1100 ) {
				$( '.site' ).css('margin-top', '85px');
			} else if( width < 1100 && width > 650 ) {
				$( '.site' ).css('margin-top', '96px');
			} else if(  width < 650 ) {
				$( '.site' ).css('margin-top', '133px');
			}
		}

		$(window).on('resize', function(e) {

		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {

			if ( $( '.demo_store' ).length ) {
				var width = $(window).width();

					if ( width >= 1100 ) {
							$( '.site' ).css('margin-top', '85px');
						} else if( width < 1100 && width > 650 ) {
							$( '.site' ).css('margin-top', '96px');
						} else if(  width < 650 ) {
							$( '.site' ).css('margin-top', '133px');
					}
			}         
		}, 250);

		});

		$('.woocommerce-store-notice__dismiss-link').on('click', function() {
			$( '.site' ).css('margin-top', '0px');
		});
	});
	</script>
	<?php
}