Как я могу получить положение дочернего элемента, не зафиксированного, даже если родительский элемент исправлен?

Question

Как говорится в названии: мне нужно, чтобы «информационный ящик» не фиксировался, когда головной убор и головной блок заблокированы.

Я знаю, что это возможно. У меня есть живой пример: http://www.marktplaats.nl/. Оранжевый ящик фиксируется (головной убор), тогда белая часть (мой информационный ящик) не фиксируется. А заголовочный блок снова фиксируется («в голове»).

Это css и html, которые я использую прямо сейчас. Какую настройку нужно сделать, чтобы средний (белый) ящик не фиксировался?

#head-block{ 
 
\t width: 100%; 
 
\t height: auto; 
 
\t background: rgb(245,245,245); 
 
\t border: 1px solid grey; 
 
\t z-index: 1000; 
 
\t margin-top: 0px; 
 
} 
 

 
#head-box{ 
 
\t height: 5px; 
 
\t background: #37326a; 
 
} 
 

 
#info-box{ 
 
\t height: 50px; 
 
\t background: white; 
 
\t position: static; 
 
} 
 

 
#head-in-block{ 
 
\t width: 1100px; 
 
\t height: 60px; 
 
\t color: #37326a; 
 
\t text-align: left; 
 
\t margin: auto; 
 
\t padding: 10px; 
 
} 
 

 
.fixed{ 
 
\t position: fixed; 
 
}

<div id='head-block' class='fixed'> 
 
    <div id='head-box'></div> 
 
    <div id='info-box'></div> 
 
    <div id='head-in-block'> 
 
    </div> 
 
</div> 
 

 
<div style='height: 1500px;' id='content'> 
 
    
 
</div> 
 
Test

ли вы, ребята, смотрите на сайте эти же мне делать?

Answer 1

Веб-сайт, который вы связали, скрывает белый ящик, когда заголовок липкий. Таким образом, чтобы сделать это здесь, вы бы скрыть #info-box когда #head-block имеет класс .fixed

.fixed #info-box { 
    display: none; 
} 

#head-block{ 
 
\t width: 100%; 
 
\t height: auto; 
 
\t background: rgb(245,245,245); 
 
\t border: 1px solid grey; 
 
\t z-index: 1000; 
 
\t margin-top: 0px; 
 
} 
 

 
#head-box{ 
 
\t height: 5px; 
 
\t background: #37326a; 
 
} 
 

 
#info-box{ 
 
\t height: 50px; 
 
\t background: white; 
 
\t position: static; 
 
} 
 

 
#head-in-block{ 
 
\t width: 1100px; 
 
\t height: 60px; 
 
\t color: #37326a; 
 
\t text-align: left; 
 
\t margin: auto; 
 
\t padding: 10px; 
 
} 
 

 
.fixed{ 
 
\t position: fixed; 
 
} 
 
.fixed #info-box { 
 
    display: none; 
 
}

<div id='head-block' class='fixed'> 
 
    <div id='head-box'></div> 
 
    <div id='info-box'></div> 
 
    <div id='head-in-block'> 
 
    </div> 
 
</div> 
 

 
<div style='height: 1500px;' id='content'> 
 
    
 
</div> 
 
Test