滾動圖像upto div內容沒有位置：粘

我想要圖像在div內上下滾動。當使用chrome而不是IE，Edge或Firefox時，位置粘性工作。滾動圖像upto div內容沒有位置：粘

HTML

<section class="container"> 
    <div class="row"> 
     <div id="stamp-img" class="col-md-6"> 
      <img src=""> 
     </div> 
     <div class="col-md-6"> 
     </div> 
    </div> 
</section>

CSS

#stamp-img { 
    position: sticky; 
    top: 35%; 

    img { 
     margin: 50px 0px; 
    } 
}

來源

2017-08-28 Yh1234

爲什麼不使用固定？正如其他答案中所述，Sticky具有跨瀏覽器兼容性問題。

#stamp-img { 
 
    /* changed to fixed */ 
 
    position: fixed; 
 
    top: 35%; 
 
    /* new */ 
 
    height: 100px; 
 
    overflow: auto; 
 
    /* end new */ 
 
    img { 
 
    margin: 50px 0px; 
 
    } 
 
}

<section class="container"> 
 
    <div class="row"> 
 
    <div id="stamp-img" class="col-md-6"> 
 
     <img src="https://placehold.it/500x500"> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    </div> 
 
    </div> 
 
</section>

來源

2017-08-28 17:38:54 Syden

試圖使用固定的。我跑的問題是，不是那個div容器，它會從整個內容的頂部到底部滾動。 – Yh1234

雖然這有幫助嗎？因爲按照上面的例子，它應該工作正常，否則如果你可以提供更廣泛的場景，我可以嘗試從那裏幫助你。 – Syden

是啊幫助我或正確的道路。所以我使用了col-md-6，因此左側有圖像，右側有描述。需要弄清楚如何正確對齊，因爲固定會使圖像處於描述的前面。也似乎固定應用於HTML的主體，而不是僅僅是父級包裝部分。 – Yh1234

「粘性性質是，不應該在生產代碼中使用的實驗API」

=>https://developer.mozilla.org/en-US/docs/Web/CSS/position

來源

2017-08-28 17:34:55 Christian

滾動圖像upto div內容沒有位置：粘

回答

相關問題