javascript - Jquery - Animate by scroll positions to work the same on window resize -

hey have annoying issue thats got simple solution life of me cant find away fix it.

basically have 2 images both 50% of it's container goal both images slide in (left/right) on basis of scroll position , once top of container both images sit place.

now got working point issue when resize page position of both images wrong. did resize() function same logic scroll() function still got nowhere. here's code

var page_width  =  $(document).outerwidth(),             page_height =  $(document).outerheight(),             left_image  =  $('.split-screen.youth'),             right_image =  $('.split-screen.elite'),             offset      =  (page_width) / page_height;          left_image.css({'left':'0px'});         right_image.css({'right':'0px'});          $(window).on('scroll', null, function(){             var scrolltop =  $(window).scrolltop(),                 calc      =  -(scrolltop*offset);               left_image.css({                 'margin-left': 'calc(100% + '+calc+'px)'              });              right_image.css({                 'margin-right': 'calc(100% + '+calc+'px)'             });         });          $(window).resize(function(){             // ???         }); 

here jsfiddle of issue although doesn't entirely accurate picture. when resize scroll position changes , need margin-left/margin-right values correct.

i think problem you're still using old offset value. update global values first, works me (see: https://jsfiddle.net/a7tfmp37/2/):

 $(window).resize(function(){     page_width  =  $(document).outerwidth(),     page_height =  $(document).outerheight(),     offset      =  (page_width) / page_height;     var scrolltop =  $(window).scrolltop(),         calc      =  -(scrolltop*offset);      left_image.css({         'margin-left': 'calc(100% + '+calc+'px)'      });      right_image.css({         'margin-right': 'calc(100% + '+calc+'px)'     }); });