Добавление заголовка Sticky к элементам div на той же странице автоматически

Question

У меня есть несколько длинных элементов div на одной странице, каждый со своим стилем.например:

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

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

каким-либо образом использовать имя класса в качестве липкого заголовка, когда пользователь прокручивает текст в каждом элементе div?Таким образом, если человек прокручивает внутри div с помощью class: «joe», тогда слово «joe» будет отображаться в верхней части экрана, пока пользователь не прокрутит до конца div.Затем он исчезает, пока он не войдет в следующий div, в котором будет отображаться имя класса этого div.

Существует много десятков таких div с различными именами классов, поэтому ручное решение не будет работать.должен быть автоматическим через css и / или js.

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

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

Я надеюсь, что япомог