如何在容器內但在當前行之外創建粘性 div 元素？

Question

我需要在這里快速修復，如何使具有粘性類的元素在容器內實際粘性但在其父行之外也是粘性的。 任何人都可以建議我使用 HTML css 和 javascript 進行快速修復嗎？ 謝謝！

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Sticky Element</title>
 <style>
  .sticky{
   position: sticky;
   top: 120px;
   height: 200vh;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-lg-2">
    <div class="sticky">
     <h1>Sticky element</h1>
    </div>
   </div>
   <div class="col-lg-10">
    
   </div>
  </div>
  <div class="row">
   <div class="col-lg-2">
    
   </div>
   <div class="col-lg-10">
    
   </div>
  </div>
  <div class="row">
   <div class="col-lg-2">
    
   </div>
   <div class="col-lg-10">
    
   </div>
  </div>
 </div>
</body>
</html>

Answer 1

position: absolute適用於sticky ，但sticky必須在父元素下（所以在你的情況下它必須正好在container ）。

 .row { background: #CCC; border-bottom: 1px solid black; } .sticky { position: absolute; } .row>div { padding: 40px; } .container { margin-top: 40px; margin-bottom: 40px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="sticky"> <h1>Sticky element</h1> </div> <div class="row"> <div class="col-lg-2"> Cell 1 </div> <div class="col-lg-10"> Cell 2 </div> </div> <div class="row"> <div class="col-lg-2"> Cell 3 </div> <div class="col-lg-10"> Cell 4 </div> </div> <div class="row"> <div class="col-lg-2"> Cell 5 </div> <div class="col-lg-10"> Cell 6 </div> </div> </div>

如果有什么不正確，請發表評論。

如何在容器內但在當前行之外創建粘性 div 元素？

問題描述

1 個解決方案

解決方案1
0 2020-08-27 14:44:21

如何在容器內但在當前行之外創建粘性 div 元素？

問題描述

1 個解決方案

解決方案1 0 2020-08-27 14:44:21

解決方案1
0 2020-08-27 14:44:21