javascript - 如何在页面向下滚动时将两个元素分开？

Question

有人可以帮忙提出一个实现以下目标的好方法吗？

我希望两个重叠的图像(它们是图像并不重要)在页面向下滚动时滑开并进入 View ，并在它们时滑回一起走出视线。想一想 zip 的工作原理。

从另一个脚本我认为它可以通过调整以下内容来实现，但我仍然无法理解它:

var top = $('.container').offset().top - parseFloat($('.container').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
  $('.imageA').addClass('moveLeft');
  $('.imageB').addClass('moveRight');
  }
else {
  $('.imageA').removeClass('moveLeft');
  $('.imageB').removeClass('moveRight');
  }
});

但这只会在 .container 进入 View 时触发一次事件。

我怎样才能使容器滚动到 View 中的次数越多，图像之间的距离就越大？

Answer 1

你只是设置/删除一个类，所以你不会得到动画运动。您应该尝试设置相对于 y 变量的位置或边距。

给你一个想法的简单例子:

.left {
    width: 100px;
    height: 100px;
    background-color: #f99;
    position: absolute;
    right: 50%;
    bottom: 0;
}

.right {
    width: 100px;
    height: 100px;
    background-color: #9f9;
    position: absolute;
    left: 50%;
    bottom: 0;
}

$(window).scroll(function (event) {
    var y = $(this).scrollTop();
    $('.left').css('marginRight', y/5);
    $('.right').css('marginLeft', y/5);
});

参见 jsFiddle here