自动添加 Sticky header 到同一页面中的 div 元素

Question

我有一些很长的 div 都在一个页面上，每个都有自己的风格。像这样：

<div class="joe">
.... (pages of text)
</div>

<div class="harry">
...(pages of text)
</div>

当用户滚动浏览每个 div 中的文本时，有什么方法可以使 class 名称成为粘性 header？因此，如果一个人在 div 内滚动 class:"joe" 那么单词 "joe" 将出现在屏幕顶部，直到用户滚动到末尾div。然后它会消失，直到他输入下一个 div，它会显示 div 的 class 名称。

有许多这样的 div 具有各种 class 名称，因此手动解决方案是行不通的。需要通过cssand/orjs.

自动

Answer 1

您需要制作一个 header（最好的方法是使用 HTML5 中添加的新 < header > 标签）和 CSS你应该添加这个：

header {
position: sticky;/*makes object sticky*/
top: 0;/*set header to the top of the page*/
z-index: 100;/*changes the header position to the front of the page*/
}

希望对你有所帮助

Answer 2

可以考虑可以转换为伪元素的data-attribute:

div[data-name]::before{
   content:attr(data-name);
   display:block;
   position:sticky;
   top:0;
   text-align:center;
   background:red;
   font-size:20px;
}

body {
 max-width:50%;
}

<div class="joe" data-name="joe">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
  Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>

<div class="harry" data-name="harry">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
  Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>

如果你想自动附加数据属性，你可以添加一个小 JS:

var all = document.querySelectorAll('div[class]');
for(var i=0;i<all.length;i++) {
  all[i].setAttribute('data-name',all[i].className);
}

div[data-name]::before{
   content:attr(data-name);
   display:block;
   position:sticky;
   top:0;
   text-align:center;
   background:red;
   font-size:20px;
   margin-bottom:20px;
}

body {
 max-width:50%;
}

<div class="joe" >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
  Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>

<div class="harry" >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
  Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>

自动添加 Sticky header 到同一页面中的 div 元素

Adding Sticky header to div elements in same page automatically

javascript

css

sticky