Jquery outerHeight固定位置导航时线包裹

我有一个固定的位置nav在我的网站的顶部。我使用outerHeight来获取nav容器的高度，然后我将它作为顶部填充到容器中的nav下面的内容。除非缩小窗口，否则这一切都可以正常工作，因此导航会覆盖多行。在Chrome浏览器和IE浏览器中，outerHeight仍然可以测量，就好像这行代码没有包装一样（在Firefox中工作正常）。Jquery outerHeight固定位置导航时线包裹

function contentTopMargin() { 
    var topHeight = $('#topNavContainer').outerHeight(true) - 1; 
    $('#container').css('padding-top', topHeight + 'px'); 
} 

$(document).ready(function() { 
    contentTopMargin(); 
    }); 

$(window).resize(function() { 
    contentTopMargin(); 
});

HTML

<header id="topNavContainer"> 
<nav id="topNav"> 

    <div class="current navItem"><a href="#1">item 1</a></div> 
    <div class="navItem"><a href="#2">item 2</a></div> 
    <div class="navItem"><a href="#3">item 3</a></div> 
    <div class="navItem"><a href="#4">item 4</a></div> 
    <div class="navItem"><a href="#5">item 5</a></div> 

    <div class="clearDiv"></div><!-- for clearing floats --> 
</nav> 
</header> 

<div id="container"> 
Some content 
</div>

CSS

#topNavContainer { 
position: fixed; 
width: 100%; 
background: #333; 
} 

#topNav { 
padding-top: 3.5rem; 
padding-bottom: 1.5rem; 
margin: 0 auto; 
max-width: 1200px; 
width: 90%; 
border-bottom: 1px solid #b1bdbe; 
} 

#topNav div.navItem { 
display: block; 
float: left; 
margin-right: 4%; 
font-size: 1.4rem; 
} 

#container { 
margin: 0 auto; 
max-width: 1200px; 
width: 90%; 
padding-top: 7.5rem; 
padding-bottom: 5rem; 
} 

.clearDiv { 
clear: both; 
}

来源

2012-05-10 MJR

调用函数时，窗口大小

$(function() { 
    $(window).on('resize', function() { 
     contentTopMargin(); 
    }); 
});

来源

2012-05-10 15:53:11

对不起，我忘了在我的问题中添加一些JS。我打电话给contentTopMargin同时准备好文档和调整窗口大小。也不是调整窗口大小的行为是问题。如果我在窗口很小时重新加载页面并导致导航覆盖问题仍然存在。 – MJR

@MJR你有一个例子或JSFiddle吗？ –

Jquery outerHeight固定位置导航时线包裹

回答

相关问题