javascript - 固定 div 内的相对 div

Question

我一直在阅读有关 fixed 的内容div在relative内和absolute 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

向下滚动后，上下文菜单会粘在 View 的一侧，并随着滚动向下移动，直到到达其停止部分的末尾。如果后面有更多内容，您可以继续向下滚动，但上下文菜单不再跟随您的 View 。同样向上，您到达该部分，上下文菜单将跟随您直到该部分的开头，然后停止，您可以继续向上滚动。

这仅适用于 HTML 和 CSS 还是我需要插件？

这是一个jsFiddle一段代码，可能不完整。忘了提及，我在 Angular 6+ 中将其作为组件执行此操作，因此我没有完全访问 index.html 的权限文件 body标签。 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>

这是可以使用的 fiddle (包括您的 Bootstrap ): 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>