положение липкое автоматическое верхнее положение

Есть ли способ для стикеров учитывать другие стикеры на странице?

Например:

body {
  display: flex;
  min-height: 2000px;
  flex-direction: column;
}
#header {
  height: 40px;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  background: yellow;
}
#footer {
  flex: 0 0 auto;
  height: 20px;
}
#main {
  display: flex;
  flex: auto;
  background: blue;
}
#side {
  width: 200px;
  background: red;
}
#side > div {
  position: sticky;
  top: 0px;
}
<div id="header">header</div>
<div id="main">
  <div id="side">
    <div>side</div>
  </div>
  <div id="content">
    content
  </div>
</div>
<div id="footer">footer</div>

Обратите внимание, что если я прокручиваю вниз, заголовок будет перекрывать боковую панель, потому что они имеют одинаковую позицию top.

Чтобы исправить это, я должен сделать так, чтобы верхняя позиция боковой панели принимала значение высоты заголовка.

body {
  display: flex;
  min-height: 2000px;
  flex-direction: column;
}
#header {
  height: 40px;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  background: yellow;
}
#footer {
  flex: 0 0 auto;
  height: 20px;
}
#main {
  display: flex;
  flex: auto;
  background: blue;
}
#side {
  width: 200px;
  background: red;
}
#side > div {
  position: sticky;
  top: 40px;
}
<div id="header">header</div>
<div id="main">
  <div id="side">
    <div>side</div>
  </div>
  <div id="content">
    content
  </div>
</div>
<div id="footer">footer</div>

Но что, если заголовок имеет переменную высоту? Могу ли я каким-то образом указать браузеру расположить стикеры так, чтобы они не перекрывали другие?


css position overlap sticky
person Elfy    schedule 03.03.2015    source источник
comment
привет, я столкнулся с той же проблемой в 2021 году, ты нашел ответ на этот вопрос? в основном я не хочу использовать js для обновления верхнего значения динамического заголовка   -  person santiago arizti    schedule 23.01.2021

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вам нужно будет использовать javascript для этого. Сначала, чтобы получить высоту заголовка, а затем установить верхнюю позицию вашего бокового div, используя это значение. Боюсь, я не знаю ни одного чистого способа сделать это css.

Если вы используете jQuery, вы просто используете метод .height(), если нет, вы можете использовать это:

var clientHeight =        document.getElementById('myDiv').clientHeight;

var offsetHeight = document.getElementById('myDiv').offsetHeight;

Метод смещения получает высоту с любыми отступами и границами.

person Steven Hoskins    schedule 03.03.2015