Исправлен div в относительном div

Question

Я читал о fixed div в relative и absolute div здесь:

Исправить положение div относительно другого div

Фиксированный позиционный div в относительном родительском div

Фиксированная позиция, но относительно контейнера

И многие другие, кроме никто не может помочь мне достичь поведения, которое я видел на нескольких страницах (в блогах). Я не могу вспомнить одно на данный момент, но вот некоторые изображения, чтобы объяснить

Просмотр 1 & Просмотр 2

После прокрутки вниз, контекстное меню придерживается в сторону вида и перемещается вниз с помощью прокрутки, пока не достигнет конца секции, в которой он останавливается. Если после него появляется больше контента, вы можете продолжать прокручивать его вниз, но контекстное меню больше не будет соответствовать вашему мнению. Когда вы поднимаетесь в тот же раздел, контекстное меню следует за вами до начала раздела, затем останавливается, и вы можете продолжать прокрутку вверх.

Это возможно только с HTML и CSS или мне нужен плагин?

Вот фрагмент кода jsFiddle , возможно, неполный. Забыл упомянуть, я делаю это в Angular 6+ как компонент, поэтому у меня нет полного доступа к файлу index.html с тегом body. JsFiddle показывает, с чем я могу работать.

Answer 1

Произошло несколько вещей:

1. Вы можете установить body { position: relative } в вашем CSS
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>

Вот скрипка, с которой можно поиграть (включая ваш 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>