固定相对 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>