Jquery - 通过滚动位置动画以在窗口调整大小时相同

Question

嘿，我有一个非常烦人的问题，它可能有一个简单的解决方案，但我终其一生都无法解决它。

基本上我有两个图像都是 50% 的容器现在目标是两个图像根据滚动位置滑入（左/右），一旦它到达容器的顶部，两个图像都会坐是地方。

现在我已经做到了这一点，唯一的问题是当我调整页面大小时，两个图像的位置都是错误的。我显然做了一个与 scroll() 函数具有相同逻辑的 resize() 函数，但我仍然一无所获。这是我的代码

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 ???
        });

这里是这个问题的 jsFiddle，虽然它看起来并不完全准确，但你明白了。当您调整滚动位置的大小时，我需要margin-left/margin-right 值是正确的。

Answer 1

我认为您的问题是您仍在使用旧的偏移值。只需先更新您的全局值，这对我有用（请参阅：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)'
    });
});