How to do css media query equivalent within javascript -

i want change javascript below if screen resolution 768px wide or lower, header_height variable reduced 50 instead of 100, otherwise stays @ 100. in advance assistance!

<script>  $(window).scroll(function () {  	    var elem = $('.header');    	    var header_height	= 100;  		var header_top 		= elem.offset().top;  		var current_top		= $(this).scrolltop();    	    if (current_top > header_height && !elem.hasclass('fixed'))  		{  	    	elem.addclass('fixed');  			$('body').addclass('fixed-padding');  	    }  	    else if(current_top <= header_height && elem.hasclass('fixed'))  		{  	    	elem.removeclass('fixed');  			$('body').removeclass('fixed-padding');  		}  	});  </script>

you can window width using window.innerwidth, , combine ternary operator set value of header_height:

var header_height = (window.innerwidth <= 768) ? 50 : 100; 

it's worth noting in order correctly detect changes in user's window, should hook onresize event, suggested in soviut's answer.