Question

如何在后台内容可滚动时始终将容器标题保持在容器顶部？

标题和内容必须放在一个容器中。

请不要使用jQuery或JS。

.contentContainer {
  background-color: gray;
  height: 100px;
  margin: 1em 0;
}

.scrollContainer {
  height: 300px;
  position: relative;
  overflow: scroll;
  border: 1px solid
}

.scrollContainer_header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: red;
  text-align: center;
  z-index: 2;
}

.scrollable_content {
  position: relative;
}

<div id="app">
  <div class="contentContainer">
    Content #1
  </div>
  <div class="scrollContainer">
    <div class="scrollContainer_header">
      HEADER
    </div>
    <div class="scrollable_content">
      LOOOOONG SCROLLABLE CONTENT
    </div>
  </div>
  <div class="contentContainer">
    Content #2
  </div>
</div>

link to the fiddle

Answer 1

使用position: sticky; （请参见小提琴：http://jsfiddle.net/qf8r6abL/13/）

.scrollContainer_header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 30px;
    background-color: red;
    text-align: center;
    z-index: 2;
}

.contentContainer{
  background-color: gray;
  height: 100px;
  margin: 1em 0;
}
.scrollContainer{
  height: 300px;
  position: relative;
  overflow: scroll;
  border: 1px solid
}
.scrollContainer_header{
  position: sticky;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: red;
  text-align: center;
  z-index: 2;
}
.scrollable_content{
  position: relative;
}

<div id="app">
  <div class="contentContainer">
  Content #1 
  </div>
  <div class="scrollContainer">
    <div class="scrollContainer_header">
      HEADER
    </div>
    <div class="scrollable_content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis se probavit. Odium autem et invidiam facile vitabis. Post enim Chrysippum eum non sane est disputatum. Id et fieri posse et saepe esse factum et ad voluptates percipiendas maxime pertinere. At tu eadem ista dic in iudicio aut, si coronam times, dic in senatu. Duo Reges: constructio interrete. Quae in controversiam veniunt, de iis, si placet, disseramus. Eadem nunc mea adversum te oratio est.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis se probavit. Odium autem et invidiam facile vitabis. Post enim Chrysippum eum non sane est disputatum. Id et fieri posse et saepe esse factum et ad voluptates percipiendas maxime pertinere. At tu eadem ista dic in iudicio aut, si coronam times, dic in senatu. Duo Reges: constructio interrete. Quae in controversiam veniunt, de iis, si placet, disseramus. Eadem nunc mea adversum te oratio est.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis se probavit. Odium autem et invidiam facile vitabis. Post enim Chrysippum eum non sane est disputatum. Id et fieri posse et saepe esse factum et ad voluptates percipiendas maxime pertinere. At tu eadem ista dic in iudicio aut, si coronam times, dic in senatu. Duo Reges: constructio interrete. Quae in controversiam veniunt, de iis, si placet, disseramus. Eadem nunc mea adversum te oratio est.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis se probavit. Odium autem et invidiam facile vitabis. Post enim Chrysippum eum non sane est disputatum. Id et fieri posse et saepe esse factum et ad voluptates percipiendas maxime pertinere. At tu eadem ista dic in iudicio aut, si coronam times, dic in senatu. Duo Reges: constructio interrete. Quae in controversiam veniunt, de iis, si placet, disseramus. Eadem nunc mea adversum te oratio est.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis se probavit. Odium autem et invidiam facile vitabis. Post enim Chrysippum eum non sane est disputatum. Id et fieri posse et saepe esse factum et ad voluptates percipiendas maxime pertinere. At tu eadem ista dic in iudicio aut, si coronam times, dic in senatu. Duo Reges: constructio interrete. Quae in controversiam veniunt, de iis, si placet, disseramus. Eadem nunc mea adversum te oratio est.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis se probavit. Odium autem et invidiam facile vitabis. Post enim Chrysippum eum non sane est disputatum. Id et fieri posse et saepe esse factum et ad voluptates percipiendas maxime pertinere. At tu eadem ista dic in iudicio aut, si coronam times, dic in senatu. Duo Reges: constructio interrete. Quae in controversiam veniunt, de iis, si placet, disseramus. Eadem nunc mea adversum te oratio est.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis se probavit. Odium autem et invidiam facile vitabis. Post enim Chrysippum eum non sane est disputatum. Id et fieri posse et saepe esse factum et ad voluptates percipiendas maxime pertinere. At tu eadem ista dic in iudicio aut, si coronam times, dic in senatu. Duo Reges: constructio interrete. Quae in controversiam veniunt, de iis, si placet, disseramus. Eadem nunc mea adversum te oratio est.
    </div>
  </div>
  <div class="contentContainer">
    Content #2
  </div>
</div>

Answer 2

只需将.scrollContainer_header类的位置从absolute更改为sticky

.scrollContainer_header { 位置：粘性； }

如何使容器标头固定不随内容滚动？

2 个答案: