如何使用overflow-y在固定位置div上定位粘性标题：滚动答案

【问题标题】：How to position sticky header on fixed position div with overflow-y: scroll如何使用overflow-y在固定位置div上定位粘性标题：滚动
【发布时间】：2017-11-03 04:26:39
【问题描述】：

我有一个弹出窗口，其中包含要在固定尺寸 div 上滚动的信息。弹出窗口还需要位置：固定，因为它可能出现在网站的任何位置：

HTML：

<div class="info-box">
  <div class="info-box-header">
  <a data-val="perfil" class="box-control">
    <img class="close-btn" ... />
  </a>

<h3>PERFIL</h3><br><br>
</div>

<div class="info-box-content">
    <p>Lorem ipsum...</p>
</div>

</div>

CSS：

  .info-box{
    background-color: #0f0;
    padding: 1em;
    position: fixed;
    z-index: 9999;
    width: 36em;
    height: 38em;

    overflow-y: scroll;
  }

  .info-box-content{
  }

  .info-box-header{
    position: sticky;
  }

为了能够滚动浏览内容并始终看到关闭按钮和标题，我需要 info-box-header 是一个粘性标题，所以我尝试了 position:sticky，但是，似乎溢出-y :scroll 父 .info-box 根本不关心。

仅为 info-box-content 类设置 overflow-y 属性无效。更新这可能是因为没有设置这个 info-box-content 类的高度，但是需要具有不同内容的类似框。

你会如何处理这个问题？谢谢。

【问题讨论】：

标签： html css sticky

【解决方案1】：

为.info-box-content 添加了维度和溢出。高度需要调整。出于演示目的设置为较小的值。

.info-box{
    background-color: #0f0;
    padding: 1em;
    position: fixed;
    z-index: 9999;
    width: 22em;
    height: 38em;  
}

.info-box-content{
  width: 20em;
  height: 10em;
  overflow-y: scroll;
}

.info-box-header{
    position: sticky;
}

<div class="info-box">
  <div class="info-box-header">
  <a data-val="perfil" class="box-control">
    <img class="close-btn" ... />
  </a>

<h3>PERFIL</h3><br><br>
</div>

<div class="info-box-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div>

【讨论】：