javascript - How to rerender or refresh or get js code to work properly for different resolutions? -

i had seen there similar questions, couldn't find proper answer problem.

code:

function test() {  var scroll = parseint($('.sidebar').css('height'));  if (window.matchmedia('(min-width: 769px)').matches) {      $(window).scroll(function() {         if ( $(window).scrolltop() > scroll  ) {                   $('.element').addclass('fixed');         } else {             $('.element').removeclass('fixed');         }     }); } }   window.onload = function() { test(); } 

as can see code (adding , removing simple class when scrolling) should work resolutions bigger 769px (width) , works - when test on mobile device resolution 1024x768 @ 1024px width - works fine, problem when rotate device - width 768px, "fixed" class again added , breaks layout. have refresh whole page code work properly.

i can make whole page reload on resize slow , irritating users.

tried set function , on resize doesn't work.

$(window).resize(function() {     cleartimeout(window.resizedfinished);     window.resizedfinished = settimeout(function(){         test();     }, 10); });  

tried add "else" if (window.matchmedia('(min-width: 769px)').matches) doesn't work too.

is there way fix this?

the scroll-event added onload, , not removed on resize-event. event-function still being triggered. how about:

 $(window).on('scroll resize', function() { // on both scroll , resize, call     if (         window.matchmedia('(min-width: 769px)').matches          && $(window).scrolltop() > scroll       ) {               $('.element').addclass('fixed');     } else {         $('.element').removeclass('fixed');     } });