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

粘滞的标头css和jquery效果

1 个答案: