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'); } });
Comments
Post a Comment