固定相對 div 內的 div

Question

我一直在閱讀關於relative和absolute div中的fixed div的信息：

修復 div 相對於另一個 div 的 position

在相對父 div 中固定定位的 div

固定 position 但相對於容器

還有許多其他但沒有一個可以幫助我實現我在幾頁（博客）中看到的行為。 我現在不記得了，但這里有一些圖像可以解釋

查看 1 & 查看 2

向下滾動后，上下文菜單會粘在視圖的一側並隨着滾動向下移動，直到到達它停止的部分的末尾。 如果后面有更多內容，您可以繼續向下滾動，但上下文菜單不再跟隨您的視圖。 同樣向上，您到達該部分，上下文菜單會跟隨您直到該部分的開始，然后停止並且您可以繼續向上滾動。

僅使用 HTML 和 CSS 是否可行，還是我需要插件？

這是一段jsFiddle代碼，可能不完整。 忘了提，我在 Angular 6+ 中作為組件執行此操作，因此我無法完全訪問帶有body標簽的index.html文件。 jsFiddle 展示了我可以使用的內容。

Answer 1

發生了一些事情：

1. 您可以在 CSS 中設置body { position: relative }
2. position: sticky需要一個全高的柱子才能工作。 因為保存菜單col-6只有它需要的高度，所以它不會滾動。
3. 我將p-sticky class 移至您的專欄。
4. sticky還需要一個top值來知道元素一旦變得粘性應該粘在哪里。

.p-sticky {
  position: sticky;
  top: 60px;
}

 body { position: relative; } /*some attemps*/.p-relative { position: relative; }.p-absolute { position: absolute; }.p-sticky { position: sticky; top: 60px; }.p-fixed { position: fixed; } /* Standar CSS*/.navbar { background-color: blue; width: 100%; }.nav-fixed { top: 0px; z-index: 1; position: fixed; }.content-ex1 { height: 200px; background-color: green; }.content-ex2 { height: 500px; background-color: #aaaaaa; }.menu { height: 50px; background-color: red; }

 <div class="navbar"> some navbar things </div> <div class="navbar nav-fixed"> some navbar things </div> <div class="content-ex1"> Some content here</div> <div class="container"> <div class="row"> <div class="col-sm-6 p-sticky"> <div class="menu">menu or something</div> </div> <div class="col-sm-6 content-ex2"> Some content here</div> </div> </div> <div class="content-ex1"> Some content here</div>

這是要玩的小提琴（包括您的引導程序）： http://jsfiddle.net/w4mz9dte/

注意：您似乎使用的是舊版本的 BootStrap。 您可能想要更新到最新版本。 在這種情況下，只有幾件事會改變 - 即，您將p-sticky class 移動到菜單。

這是 BS 4.4 的最新版本： http://jsfiddle.net/kamr0bjw/

 body { position: relative; } /*some attemps*/.p-relative{ position:relative; }.p-absolute{ position:absolute; }.p-sticky{ position:sticky; top: 60px; }.p-fixed{ position:fixed; } /* Standar CSS*/.navbar{ background-color: blue; width:100%; }.nav-fixed{ top: 0px; z-index:1; position:fixed; }.content-ex1{ height:200px; background-color: green; }.content-ex2{ height:500px; background-color: #aaaaaa; }.menu{ height:50px; background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script> <div class="navbar"> some navbar things </div> <div class="navbar nav-fixed"> some navbar things </div> <div class="content-ex1"> Some content here</div> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="menu p-sticky">menu or something</div> </div> <div class="col-sm-6 content-ex2"> Some content here</div> </div> </div> <div class="content-ex1"> Some content here</div>