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