固定相对 div 中的 div

Question

我在relative 和absolute div 中阅读了有关fixed div 的信息：

Fix position of div with respect to another div

Fixed positioned div within a relative parent div

Fixed position but relative to container

还有许多其他但没有一个可以帮助我实现我在几页（博客）中看到的行为。暂时想不起来了，这里有一些图片可以解释一下

查看 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 课程移至您的专栏。
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 类移动到菜单中。

这是 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>