时间戳

首页 > 解决方案 > 如何在容器内但在当前行之外创建一个粘性 div 元素？

javascript - 如何在容器内但在当前行之外创建一个粘性 div 元素？

问题描述

我需要在这里快速修复，如何使具有粘性类的元素在容器内实际上是粘性的，但在它的父行之外也是如此。任何人都可以建议我使用 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>

标签： javascripthtmlcss

解决方案

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>

如果有什么不正确的，请发表评论。

推荐阅读