Javascript 避免与固定元件重叠

我正在网页顶部创建一个固定导航。但是包装器内容会重叠。因此，我使用jQuery设置利润率上限：

$（'#wrapper'）.css（'margin-top'，function（）{return$（'nav'）.height（）；}）
nav{
背景色：#中交；
位置：固定；
排名：0；
宽度：100%；
线高：2.5；
}
@媒体屏幕和屏幕（最小宽度：800px）{
导航{
线高：1.5；
}
}

导航
标题
洛雷姆

ipsum

多洛

坐下

amet

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

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

将其设置为“文档就绪”和“窗口大小调整”。例如：

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

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

您可能还希望限制或取消对函数的调用

另一种方法是使用“常规”css和媒体查询来设置页边距顶部。
您需要在开始时触发调整大小事件，如下所示

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

我需要原始的
.css（…）
调用和
resize
处理程序，不是吗？是的。我说回忆是因为你必须在
$（document.ready（）
和
$（window.resize（）
上调用一次，但我只知道
行高度，而不知道导航的像素高度，所以我不能在常规css中使用它。此外，如果我使用
$（'nav'）。改为调整大小（…）
？这将是任何未来导航栏高度变化的故障保护，与窗口大小调整无关。节流或去盎司意味着什么？啊，好吧，我想你知道高度，但它会随着窗口宽度而频繁变化（因此媒体查询）。无论如何，那么jquery将是一条出路。我认为resize事件只在窗口上触发，所以您应该使用它。顺便说一下，您不需要函数和返回