相对div内固定div

Question

我一直在读关于fixed div在relative和absolute div的文章：

相对于另一个div确定div的位置

在相对父div中固定定位div

固定位置，但相对于集装箱

还有很多其他的，但没有人能帮助我实现我在几页(博客)中看到的行为。我现在记不起来了，但是这里有一些图片要解释。

意见1

和视图2

​

向下滚动后，上下文菜单将粘附在视图的一侧，并与滚动一起向下移动，直到其停止的部分结束为止。如果后面有更多的内容，您可以继续向下滚动，但是上下文菜单不再遵循您的视图。同样的上升，你到达部分，上下文菜单跟着你，直到开始，然后停止，你可以继续滚动。

这是只适用于HTML和CSS，还是我需要一个插件？

下面是一段jsFiddle代码，可能是不完整的。忘了提到，我是作为一个组件在角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>

​