javascript - 如何将div设置为背景？

我在这个链接上发现了一些有趣的东西。但我不知道怎么做，我想知道是否有人知道怎么做。所以我意识到，即使调整de browser窗口的大小，元素也会保持浮动，但这里唯一关注的元素是网页，而不是左右浮动的div。这是我尝试过的https://jsfiddle.net/eoopvgmc/9/但是唯一有效的是那些浮动元素。
以下是我想知道如何做到这一点http://demo.inskinmedia.com/cds/show.php?live=uxtxbpwvx&ismState=1

(function($) {
            var element = $('.left-zone'),
                originalY = element.offset().top;
            var topMargin = 0;
            element.css('position', 'relative');
            $(window).on('scroll', function(event) {
                var scrollTop = $(window).scrollTop();
                element.stop(false, false).animate({
                    top: scrollTop < originalY ? 0 : scrollTop - originalY + topMargin
                });
            });
        })(jQuery);

        (function($) {
            var element = $('.right-zone'),
                originalY = element.offset().top;
            var topMargin = 0;
            element.css('position', 'relative');
            $(window).on('scroll', function(event) {
                var scrollTop = $(window).scrollTop();
                element.stop(false, false).animate({
                    top: scrollTop < -250 ? -250 : scrollTop - originalY + topMargin
                });
            });
        })(jQuery);

最佳答案

只需添加一个固定宽度的div来包装它们
编辑：更改代码以适应请求->

$(document).ready(function() {
  $(document).on('scroll', function() {
    $('.ads').css({
      'top': $(window).scrollTop() + 'px'
    });
  })
});

body {
  margin: 0;
}
.wrapper {
  position: relative;
  width: 500px;
  margin: 0 auto;
}
.main_content {
  background: blue;
  float: left;
  height: 1500px;
  width: 500px;
}
.top_banner {
  background: orange;
  float: left;
  height: 250px;
  width: 500px;
}
.left-zone,
.right-zone {
  position: absolute;
  top: 0;
  width: 224px;
  height: 284px;
  transition: top 0.8s;
}
.left-zone {
  background: yellow;
  left: -224px;
}
.right-zone {
  background: red;
  right: -224px;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="left-zone ads"></div>
  <div class="top_banner"></div>
  <div class="main_content"></div>
  <div class="right-zone ads"></div>
</div>