javascript – 滚动时将div移开

2023年12月13日 168次阅读

目前我有一个页面,其中两个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插件或库可以轻松实现这种效果？

最佳答案 如果我理解你的问题,这很容易.你可以使用这个小jquery：

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

它基本上将当前滚动位置检测为变量(滚动),并将该值添加到右侧和左侧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

点赞