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.
Comments
Post a Comment