Стек липкий элемент после другого липкого элемента с динамической высотой - PullRequest
Новая
       2

Стек липкий элемент после другого липкого элемента с динамической высотой

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

Мне нужно сложить несколько элементов липкого заголовка, как это: https://webthemez.com/demo/sticky-multi-header-scroll/index.html

Здесь есть решения для этого вопроса в здесь . Но в моем случае мои липкие заголовки имеют динамические высоты. Поэтому невозможно жестко закодировать верхнюю позицию для заголовков флешек. Мой код, как показано ниже:

HTML 

<div class="sticky-header1">
    Header 1 with dynamic height
</div>
<div>
    Header 1 content
</div>

<div class="sticky-header2">
    Header 2 with dynamic height
</div>
<div>
    Header 2 content
</div>

1011 * CSS * 

.sticky-header1,
.sticky-header2
{
    position: sticky;
}

Можно ли в этом сценарии установить сложенный липкий заголовок? Чистое решение CSS предпочтительнее.

Ответы [ 2 ]

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

может быть, вам нужно использовать JavaScript следующим образом: 

firstdiv =document.querySelector(".first");
secondiv =document.querySelector(".second");
thirdiv = document.querySelector(".third");
const fheight = firstdiv.offsetHeight;
const sheight = secondiv.offsetHeight;
secondiv.style.top= `${fheight}px`;
thirdiv.style.top= `${fheight+sheight}px`;
body {
  margin:0;
  min-height:200vh;
  border:2px solid;
}
.first {
  height:50px;
  background:red;
  position:sticky;
  top:0;
}

.second {
  height:60px;
  background:blue;
  position:sticky;
}
.third {
  height:80px;
  background:green;
  position:sticky;

}
<div class="first"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="second"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="third"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
0 голосов
/ 29 мая 2019

Это невозможно при использовании чистого CSS, если вы используете элемент с известной или постоянной высотой и не увеличиваете элемент, тогда это возможно (это не хорошо).Другой способ - использовать простой javascript и просто вычислить высоту элемента и установить свойство CSS position top .

--- Спасибо ---

...