Фиксированный контент внутри прокручиваемого столбца

Question

У меня есть две отдельно прокручиваемые колонки на моей странице. В левом столбце, который имеет навигационную роль, у меня есть два подэлемента, которые в настоящий момент прокручиваются все вместе:

 <div class="row">
    <div class="col-3 theme-background left-panel nav-scroll">
      <p> a - this part I want to be fixed <p>
    <div>
      <p> b - this part is scrollable  </p>
    </div>
    </div>

    <div class="col-9 nav-scroll">
      <p> c - scrollable as well<p>
    </div>   
 </div>

общий вид представлен в jfiddle ниже:

https://jsfiddle.net/macfol/wtx9zhsq/

Чего я хотел бы добиться, так это иметь нижнюю часть (b), которую можно прокручивать, а верхнюю часть (а) зафиксировать сверху столбца и всегда видеть для пользователя.

Answer 1

.nav-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  height: 90vh;
  float:left;
  bottom: 0;
  top:0;
}

body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}
.pLeftBar {
  overflow: hidden;
}
.pFixed {
  height: 30%;
  overflow: hidden;
}
.pScroll {
  height: 70%;
  overflow-y: auto;
  overflow-x: hidden;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row">
    <div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
      <p>
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
        
      </p>
</div>
    <div class="pScroll">
     <p>
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     </p>
    </div>
    </div>

    <div class="col-9 nav-scroll">
     <p>
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     </p>
    </div>

    
  </div>

Answer 2

Что-то в этом роде?

.head{
  position: relative;
  background: #FFF;
  overflow-y: none;
  overflow-x: hidden;
  height: 20vh;
  z-index: 1;
}

.nav-scroll {
  position: relative;
  overflow-y: none;
  overflow-x: hidden;
  height: 90vh;
  float:left;
  margin 0 0 0 0;
}

body, html {
  margin: 0;
  padding 0;
  overflow-y: hidden;
  width: 350px;
  height:auto;
}

<body>

 <div class="head col-9" >  
 <p>
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
      aaaaaaaaaaaaaaaaaaa
        
      </p>
     <p>
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     bbbbbbbbbbbbbbbb
     </p>
    </div>
   
    <div class="col-9 nav-scroll">
     <p>
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     ccccccccccccc
     </p>
    </div>
 
 </body>

Answer 3

Все, что вам нужно сделать, это дифференцировать прокрутку div с фиксированным div и держите фиксированный div в col-3

ссылка на скрипку

пожалуйста, проверьте ссылку