Send divs to the side when scrolling

Question

I currently have a page where two divs are set on the left or right side of the page with a fixed position, and I want to achieve an effect where each div will move to the side when you scroll down, but return to the place if you scroll the backup a copy.

I am currently working -

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

In HTML there are only two divs with class left / right

Are there Javascript pluginor librarywhich I can use to achieve this effect?

Answer 1

If I understand your question correctly, this is easy enough. You can use this little one jquery:

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

(), right left css. ( mumber , "", css, "" )

$(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>

Hide result

JSFIDDLE