jQuery-通过滚动位置进行动画处理以在窗口调整大小时保持相同

Question

Hey I have this really annoying issue thats probably got a simple solution but for the life of me i cant find away to fix it.

Basically i have two images both 50% with of it's container now the goal is the both images to slide in (left/right) on the basis of the scroll position and once it get to the top of the container both images will sit is place.

Now i got that working to that point the only issue is when i resize the page the position of both images are wrong. I obviously did a resize() function with the same logic as the scroll() function but still i got nowhere. Here's my 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(){
            // something ???
        });

Here is a jsFiddle of the issue although it doesn't look entirely accurate but you get the picture. When you resize the scroll position changes and i need the margin-left/margin-right values to be correct.

Answer 1

I think your problem is that you're still using the old offset value. Just update your global values first, than it works for 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)'
    });
});