我正在网页顶部创建一个固定的导航。但是，包装内容将重叠。所以我用jQuery设置margin-top：
$('#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>但是，如果我在一个小窗口中打开页面，然后将其最大化，则导航栏将调整大小，但margin-top将保持不变。
据我了解，该css函数仅被调用一次。是否有可能结合margin-top的#wrapper到height的nav？
在准备好文档和调整窗口大小时进行设置。例如：
function setWrapper() {
$('#wrapper').css('margin-top', $('nav').height() );
};
$(setWrapper);
$(window).resize(setWrapper);
您可能还希望限制或取消对函数的调用。
一种替代方法是使用“常规” css和媒体查询来设置页边空白。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句