Как создать sevenly.org как дизайн, используя jquery

Question

У меня есть базовые знания javascript и jquery. Я хочу реализовать дизайн, подобный Sevenly , который похож на страницу / div, перемещается поверх другой, но я не знаю, как начать с этого. Дайте мне знать, если у кого-нибудь есть идея, как это реализовать?

Answer 1

Если первый контейнер имеет определенную высоту, то я думаю, что наиболее прямым решением было бы исправить первый контейнер (position:fixed). Затем вы добавляете margin-top к остальным, чтобы толкнуть остальные, чтобы они начинались чуть ниже первого контейнера:

HTML:

<div id="header">Header</div>
<div id="rest">
    <div>Other 1</div>
    <div>Other 2</div>
    <div>Other 3</div>
</div>

CSS:

div#header{ 
    position:absolute;
    position:fixed;
    width: 100%;
    height:150px;
    border: 2px dashed yellow; 
    background-color: lightyellow; 
}
div#rest{
    margin-top:150px;
    position:relative;
}  
div#rest div{    
    height: 300px;
    border: 2px dashed green;
    background-color: lightgreen;
} 

position:absolute; для браузеров, которые не поддерживают исправленные. Сделав его абсолютным, он будет вести себя как фиксированный, за исключением того, что он прокручивается вместе с остальной частью страницы. position:relative; в остальном из-за z-стекирования. fixed - из-за контейнера заголовка он помещается в собственный слой поверх всего остального; установка остатка на relative снова помещает остаток поверх заголовка.

См. Демонстрационную версию jsfiddle здесь .

Если у вас нет определенной высоты в заголовке, вам, вероятно, придется использовать javascript.