Question

有人可以帮忙建议一个好方法来实现以下目标吗？

我想要两个重叠的图像（并不重要，因为它们是图像）在页面向下滚动时分开并进入视图，然后一起滑回走出视野。想想拉链是如何工作的。

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

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进入视野时触发事件。

我怎样才能使容器滚动到视图越多，图像之间的距离越大？

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

当页面向下滚动时，如何将两个元素分开？

1 个答案: