javascript - 页面中的几个粘性标题

Question

我有如下 JSfiddle 显示的内容:

My Fiddle

我的页面布局也很相似，页面的左半部分有一些不属于这个问题范围的东西，右半部分显示了上面 JSFiddle 中的内容。

我有几个 Wrapper 一个接一个。每个 Wrapper div 将包含 n 个 Details div，每个 Details div 由 2 个 div 组成。 标题和实际内容。

如果 Wrapper 中的 Details div 的数量超过了页面的高度，当向下滚动时，Wrapper Title 变为隐。

如何使 Wrapper Title 粘到 Wrapper 的末尾。一旦一个 Wrapper 被越过，下一个 Wrapper 的 Wrapper Title 应该会变粘。

请参阅:sticky header看看我在说什么。我想要类似的东西，但我有几个 Wrappers 一个接一个，具有不同的 Wrapper Title 每个都应该在那个 Wrapper 的范围内变得粘稠.

.wrapper {
  border: 1px solid blue;
  margin-bottom: 15px;
}

.wrapperTitle {
  font-size: 1.2em;
  font-weight: bold;
  background-color: grey;
  padding: 10px;
  margin-bottom: 5px;
}

.detailDiv {
  border: 1px solid red;
  margin-left: 7px;
  margin-bottom: 5px;
  margin-right: 2px;
}

.detailTitle {
  font-size: 1em;
  font-weight: bold;
  background-color: pink;
  padding: 10px;
  margin-bottom: 5px;
}

.details {
  margin-bottom: 5px;
  margin-left: 5px;
}

<!-- Wrapper div 1 -->
<div id="wrapperDiv" class="wrapper">
  <div id="wrapperDivTitle" class="wrapperTitle">
    Wrapper Title 1
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 2 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapper_div_title" class="wrapperTitle">
    Wrapper Title 2
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
  
    <!-- detail div 4 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 5 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 6 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
  
    <!-- detail div 7 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 8 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 9 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 3 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapper_div_title" class="wrapperTitle">
    Wrapper Title 3
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 4 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapper_div_title" class="wrapperTitle">
    Wrapper Title 4
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
  
    <!-- detail div 4 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 5 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 6 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 5 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapper_div_title" class="wrapperTitle">
    Wrapper Title 5
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

Answer 1

在 wrapperTitle 上添加位置粘性

.wrapperTitle {
  font-size: 1.2em;
  font-weight: bold;
  background-color: grey;
  padding: 10px;
  margin-bottom: 5px;
  position: sticky;
  top: 0;
}

https://jsfiddle.net/lalji1051/87ub1c4m/7/