Jquery outerHeight для навигации по фиксированной позиции при переносе строки

У меня есть фиксированная позиция навигации вверху моего сайта. Я использую outerHeight, чтобы получить высоту контейнера навигации, а затем добавляю это в качестве верхнего отступа к контейнеру для содержимого под навигацией. Все это работает хорошо, если я не уменьшаю окно так, чтобы навигационная панель занимала более одной строки. В Chrome и IE externalHeight по-прежнему измеряется, как если бы строка не переносилась (отлично работает в Firefox).

JS

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

navigation jquery css-position word-wrap height
person MJR    schedule 10.05.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вызов функции при изменении размера окна

$(function() {
    $(window).on('resize', function() {
        contentTopMargin();
    });
});
person Kyle Macey    schedule 10.05.2012
comment
Извините, я забыл добавить часть своего JS в свой вопрос. Я вызываю contentTopMargin с готовым документом и изменением размера окна. Кроме того, проблема не в изменении размера окна. Если я перезагружаю страницу, когда окно маленькое и заставляет навигацию оборачиваться, проблема все еще сохраняется. - person MJR; 10.05.2012
comment
@MJR у вас есть где-нибудь пример или JSFiddle? - person Kyle Macey; 10.05.2012