粘性標題CSS和jQuery效果

Question

我有以下代碼：

function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    }
    else {
        $('#navwrap').css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$("#navwrap").data("top", $("#navwrap").offset().top); 
// set original position on load
$(window).scroll(fixDiv);

 <div class="nav" id="navwrap">
        <style type="text/css">
    .nav
    {
        width: 100%;
        margin: 0 auto;
        background: black;
        height: 40px;
    }
    </style>
        <ul>
            <li id="home_link"><a href="#"><img src="images/nav_logo.jpg" /></a></li>
            <li><a href="#">Services &amp; Pricing</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </div>

它的作用類似於http://creuna.com上的效果，在該位置上，滾動超過其位置后，導航欄會停留在頂部。 我遇到的問題如下：

導航欄滾動時，其位置從靜態更改為“固定”。 這會導致導航欄高度的大小發生跳躍。 如何使#navwrap div保持其40px的高度，同時防止跳躍？

很抱歉，如果這個問題看起來有點特殊，請您堅持很久，並認為有人可能會提供幫助。

Answer 1

只要這樣做：

CSS：

#sticky_nav_wrapper { height:40px; }
#sticky_nav {
    height:35px;
    border:1px solid #C9D6E6;
    border-bottom:none; z-index:1;
}
#sticky_nav ul {
    list-style:none;
    margin:0;
    padding:5px;
}
#sticky_nav ul li {
    margin:0;
    padding:0;
    display:inline;
}
#sticky_nav ul li a {
    float:right;
    margin:0 0 0 5px;
}

HTML：

<div id="sticky_nav_wrapper">
    <div id="sticky_nav">
        <ul>
            <li><a href="#">Services &amp; Pricing</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </div>
</div>

jQuery的：

$(function () {
    var sticky_nav_offset_top = $('#sticky_nav').offset().top;
    var sticky_nav = function () {
        var sticky_nav_wraper_width = $('#sticky_nav_wrapper').width();
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_nav_offset_top) {
            $('#sticky_nav').css({ 'position': 'fixed', 'top': 0, width: '100%' });
        } else {
            $('#sticky_nav').css({ 'position': 'relative', width: 'auto' });
        }
    };
    sticky_nav();
    $(window).scroll(function () {
        sticky_nav();
    });
});