Как правильно отразить разные уровни заголовков с помощью позиции: липкая? - PullRequest
Новая
       39

Как правильно отразить разные уровни заголовков с помощью позиции: липкая?

0 голосов
/ 01 мая 2019

Я бы хотел элегантный способ "собирать" многоуровневые заголовки в верхней части окна, когда пользователь прокручивает, и position:sticky помогает мне на 90% пути.Приведенный ниже фрагмент работает так же, как я хотел бы, за одним исключением: когда заголовок 2b достигает вершины, заголовок 3b все еще виден.Поскольку заголовок 3b должен быть «потомком» заголовка 2а, я бы хотел, чтобы он либо прокручивался, либо как-то скрывался, как только заголовок 2b достигнет вершины.(Как и ожидалось, заголовок 1b и заголовок 2d имеют одну и ту же проблему.)

Я знаю, что у меня есть то, как CSS должен работать, но есть ли элегантный способсделать так, как я спрашиваю?Я пытался дать p a background-color из white и связываться с z-index, но мне не повезло. 

h1, h2, h3 {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

h1 {
  background-color: red;
  height: 35px;
}
h2 {
  background-color: blue;
  height: 25px;
  top: 35px;
}
h3 {
  background-color: green;
  height: 20px;
  top: 60px;
}
<h1>Header 1a</h1>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h2>Header 2a</h2>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3a</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3b</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h2>Header 2b</h2>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3c</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3d</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h1>Header 1b</h1>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h2>Header 2c</h2>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3e</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3f</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h2>Header 2d</h2>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3g</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3h</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>

Ответы [ 2 ]

1 голос
/ 01 мая 2019

Я думаю, что логичный способ сделать это - рассмотреть вложенные div, как показано ниже: 

h1,
h2,
h3 {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  margin:0;
}

h1 {
  background-color: red;
  height: 35px;
  z-index:3;
}

h2 {
  background-color: blue;
  height: 25px;
  top:35px;
  z-index:2;
}

h3 {
  background-color: green;
  height: 20px;
  top:60px;
  z-index:1;
}
<div>
  <h1>Header 1a</h1>
  <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
  <div>
    <h2>Header 2a</h2>
    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    <div>
      <h3>Header 3a</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
      <h3>Header 3b</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    </div>
  </div>
  <div>
    <h2>Header 2b</h2>
    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    <div>
      <h3>Header 3c</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
      <h3>Header 3d</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    </div>
  </div>
</div>
<div>
  <h1>Header 1b</h1>
  <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
  <div>
    <h2>Header 2c</h2>
    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    <div>
      <h3>Header 3e</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
      <h3>Header 3f</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    </div>
  </div>
  <div>
    <h2>Header 2d</h2>
    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    <div>
      <h3>Header 3g</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
      <h3>Header 3h</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    </div>
  </div>
</div>
1 голос
/ 01 мая 2019

Для этого вам нужно использовать тег 'z-index'. Первый заголовок должен иметь более низкое значение z-index, чем любой другой заголовок. Последний заголовок должен иметь самое высокое значение z-index. Тег z-index используется для размещения элементов ниже или выше любых других элементов.

...