Question

我在这个链接上发现了一些有趣的东西。但我无法弄清楚如何制作它，我想知道是否有人知道如何。所以我在这方面意识到，即使你调整浏览器窗口的大小，元素也会浮动，但不知何故，这里唯一关注的元素是网页而不是左右浮动的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);

Answer 1

只需添加一个固定宽度的div来包装它们

修改：更改了代码以适应请求 - ＆gt;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何设置div作为背景？

1 个答案: