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

【问题标题】：Adding Sticky header to div elements in same page automatically自动将 Sticky header 添加到同一页面中的 div 元素
【发布时间】：2018-12-06 22:36:34
【问题描述】：

我在一页中有一些长 div，每个都有自己的样式。像这样：

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

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

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

有很多这样的 div 具有不同的类名，因此手动解决方案行不通。需要通过css和/或js自动实现。

【问题讨论】：

将类名作为粘性标题 ?
@TemaniAfif 是的。什么不清楚？
整个句子。类名对你来说是什么？ classname as a sticky header 是什么意思？
@TemaniAfif ok 试图澄清更多

标签： javascript css sticky

【解决方案1】：

您可以考虑可以转换为伪元素的数据属性：

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>

【讨论】：

无论如何让它在用户滚动到 div 之外时自动消失？（可能在下一个 div 之前有其他元素）最好不要在其间添加一些空白 div
@michael 你可以在粘性元素上考虑 margin-bottom （检查第二个 sn-p 的更新
无论如何让它完全消失？所有 div 元素都不需要它
@michael 我认为唯一的原因是在 div 之间留有余量
好的，谢谢。实际上，当我向下滚动到 div 下方时，我看到它确实消失了。

【解决方案2】：

你需要制作一个标题（最好的方法是使用 HTML5 中添加的新标签），在 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*/
}

希望能帮到你

【讨论】：