如何制作滾動但尺寸固定的橫幅圖像

Question

我不確定確切的用語是什么，但是我想實現一個橫幅圖像，當有人在頁面中走得更遠時，該圖像具有這種滾動效果。

此效果的一個示例是此站點的橫幅圖像。

請注意，當向下滾動時，其余圖像也會顯示。 這個叫什么？ 我該如何實施呢？

我在導軌上使用Twitter Bootstrap和ruby，因此希望使用最簡單的方法來實現與bootstrap的兼容性，但是任何方法都可以，我會從那里弄清楚的。

Answer 1

使用background-attachment:fixed; 此處的信息（MDN）

這也是鏈接示例中使用的技術。 這是一個例子：

 div{ background-image: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg); background-attachment:fixed; background-size:cover; height:200px; margin:200px 0; } .s{ background-image: url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg); } 

 <div></div> <div class="s"></div> <div></div> <div class="s"></div> <div></div> <div class="s"></div> <div></div> 

Answer 2

只需申請職位：固定； 在CSS中放置到您的元素，然后使用top：x;正確放置它； 和左/右：x; 例如：

#banner {
    position: fixed;
    top: 250px;
    right: 0;
}

Answer 3

這個東西叫做“粘性導航”， 為此有很多jQuery插件，即這個

另外，請查找CSS position: fixed;