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固定位置導航時線包裹

回答

相關問題