Question

我在网页顶部创建了固定导航。但随后包装内容会重叠。所以我用jQuery设置margin-top：

＆＃13;

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

＆＃13;

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;
    }
}

＆＃13;

<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>

＆＃13;

但是，如果我在一个小窗口中打开页面然后最大化它，导航将调整大小，但margin-top将保持不变。

据我了解，css函数只调用一次。是否可以将margin-top的{{1}}绑定到#wrapper的{{1}}？

Answer 1

将其设置为文档准备就绪并在窗口调整大小。例如：

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

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

您可能还想限制或取消对该功能的调用。

另一种方法是使用“常规”css和媒体查询来设置margin-top。

Answer 2

调出窗口调整大小的设置：

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

Answer 3

你需要在开始时触发resize事件，如下面的

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

避免与固定元素

3 个答案: