jqueryを使用してデザインのようなsevenly.orgを作成するには

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に設定すると、残りの部分がヘッダーの上に再び表示されます。

See jsfiddle demo here。

ヘッダーに特定の高さがない場合は、おそらくjavascriptを使用する必要があります。