Question

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

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

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

当用户在每个div中滚动文本时，有什么方法可以将类名用作粘性标头？因此，如果某人在具有“ joe”类的div内滚动，则单词“ joe”将出现在屏幕顶部，直到用户滚动到div的末尾为止。然后消失，直到他进入下一个div，该div会显示该div的类名。

有许多这样的div，它们具有不同的类名，因此手动解决方案将不起作用。需要通过CSS和/或JS自动实现。

Answer 1

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

"%f"

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%;
}

如果要自动附加数据属性，则可以添加一个小JS：

<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>

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%;
}

Answer 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*/
}

我希望我能帮忙

自动将Sticky标头添加到同一页面中的div元素

2 个答案: