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 に答える