如何將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設置爲背景？

回答

相關問題