可滚动列中的固定内容

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）可滚动，同时使顶部（a）固定在列顶部，并且始终对用户可见。

Answer 1

您需要做的就是将滚动div与固定div区分开 并将固定div保留在col-3

中

link to fiddle

请检查链接

Answer 2

.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 3

类似的东西吗？

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

public void ConfigureServices(IServiceCollection services)
{
     services.AddMvc()
         .SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
     services.AddHttpContextAccessor();
     services.AddTransient<IUserRepository, UserRepository>();
}