固定要素との重複を避ける

Question

私はウェブページの上部に固定ナビゲーションを作成しています。しかし、ラッパーの内容は重複します。だから私はjQueryを使ってマージントップを設定しています：

$('#wrapper').css('margin-top', function() {return $('nav').height();});

nav { 
 
    background-color: #cccccc; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    line-height: 2.5; 
 
} 
 

 
@media screen and (min-width: 800px) { 
 
    nav { 
 
     line-height: 1.5; 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<nav> 
 
    NAV 
 
</nav> 
 
<div id="wrapper"> 
 
    <header id="header" class="alt"> 
 
     HEADER 
 
    </header> 
 
    <main> 
 
     Lorem <br> 
 
     ipsum <br> 
 
     dolor <br> 
 
     sit <br> 
 
     amet <br> 
 
    </main>  
 
</div>

しかし、私は小さなウィンドウでページを開くと、それを最大化した場合、その後、NAVは、サイズ変更が、margin-top意志ますそのまま。

私が理解するように、css関数は1回だけ呼び出されます。 #wrapperのmargin-topをheightのnavにバインドすることは可能ですか？

Answer 1

の準備ができて、ウィンドウのサイズ変更に文書でそれを設定します。たとえば、

function setWrapper() { 
    $('#wrapper').css('margin-top', $('nav').height()); 
}; 

$(setWrapper); 
$(window).resize(setWrapper); 

また、機能の呼び出しを抑制またはデバウンスすることもできます。

代わりに、「通常の」CSSとメディアクエリを使用してマージントップを設定することもできます。

Answer 2

リコールウィンドウのサイズ変更の設定：

$(window).resize(function(){ 
$('#wrapper').css('margin-top', function() {return $('nav').height();}); 
}) 

Answer 3

あなたは、私がいない、オリジナルの `の.css（...）`コールと `resize`ハンドラの両方が必要なのです

$(window).resize(function(){ 
    $('#wrapper').css('margin-top', $('nav').height()); 
}).trigger('resize');