0

我有以下代码：

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 的高度同时防止跳跃？

抱歉，如果这个问题看起来有点具体，只是被困在这个问题上很久了，并且认为有人可以提供帮助。

4

1 回答 1

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();
    });
});
于 2012-11-12T15:41:35.637 回答