如何将div设置为背景？

我在这个链接上发现了一些有趣的东西。但我无法弄清楚如何制作，我想知道是否有人有任何想法。所以我意识到，即使你调整浏览器窗口的大小，元素仍然是浮动的，但不知何故，这里唯一关注的元素是网页，而不是来自左侧和右侧的浮动div。这是我试过的https://jsfiddle.net/eoopvgmc/9/，但唯一可行的就是那些浮动元素。如何将div设置为背景？

这里是我想知道如何做到这一点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);

来源

2015-07-10 Markus Hayner

看起来LIK e位置：固定在我身上。除非你坚持讨厌的滚动效果。 – JavaScript

但是，如果位置固定，当您调整窗口大小时，它应该停在左边的浮动div上。我对吗？ –

我没有看到期望的页面做任何特别的事情？它看起来对元素具有固定的宽度，导致浏览器根本无法调整大小或更改浮点数？ – Jay

只需添加一个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>

来源

2015-07-10 09:37:37

这不是我想要的。当我调整浏览器大小时，黄色块应该放在窗口内。看看这个链接，当你从左或右调整大小 –

好的，所以你必须使用包装和绝对位置。我会做一个codepen，并在完成后编辑我的答案。 –

这里是：http://codepen.io/mbrillaud/pen/KpRyRN（我也在编辑答案中的片段） –

如何将div设置为背景？

回答

相关问题