滚动

Question

目前我有一个页面，其中两个div设置在页面的左/右侧，具有固定的位置，我希望实现一种效果，其中每个div在向下滚动时移动到一边，但如果向下移动，则返回到位你向后滚动。

我目前正在与之合作 -

html, body{
    height: 100%;
    width: 100%;
}

.left{
    position: fixed;

    left: 0;
    top: 0;

    height: 100%;
    width: 200px;

    background-color: #111111;
}

.right{
    position: fixed;

    right: 0;
    top: 0;

    height: 100%;
    width: 200px;

    background-color: #111111;
}

在HTML中，左/右

只有两个div

我可以使用Javascript plugin或library来轻松实现此效果吗？

Answer 1

如果我理解你的问题，那就很容易了。您可以使用这个小jquery：

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    $('.left').css('left', - scroll / 4);
    $('.right').css('right', - scroll / 4);
});

它基本上将当前滚动位置检测为变量（滚动），然后将该值添加到right和left css值。 （我将mumber除以4，因此它会减少添加到css的“scroll”值，使“动画”更慢）

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    $('.left').css('left', - scroll / 4);
    $('.right').css('right', - scroll / 4);
});

html,
body {
  height: 2000px;
  width: 100%;
  margin:0;
}

.left {
  position: fixed;
  top: 0;
  height: 100%;
  width: 200px;
  background-color: #111111;
}

.right {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 200px;
  background-color: #111111;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="left"></div>
<div class="right"></div>

<强> JSFIDDLE