導航欄會自動進入頂部

Question

當我向下滾動，導航欄的position是fixed。但是它有空間。如何使它自動到頂部？

http://jsfiddle.net/q236h/

Answer 1

要做到這一點，我一直訴諸使用JS。 jQuery使整個事情變得非常簡單。我的<nav>正常放置，直到它碰到視口的上邊緣。然後，它獲得的「固定」類添加到它，從而將其定位固定在0 0。當滾動回漲，類被再次去除，<nav>回落到原來的位置。

$(document).ready(function() { 

    var navOffset = $('nav').offset().top; 

    $(window).scroll(function() { 
     if($(window).scrollTop() > navOffset) { 
      $('nav').addClass('fixed'); 
     } else { 
      $('nav').removeClass('fixed'); 
     } 
    }); 

}); 

可以查看現場示例here。我想這就是你想要達到的目標？你的問題不是很清楚。 [/無恥的自我推銷]

Answer 2

使用這個CSS。這將解決您的問題。將導航位置更改爲「絕對」。

nav { 
float: left; 
padding-left: 10px; 
padding-top: 10px; 
font-family: Georgia; 
font-style: italic; 
font-size: 20px; 
position: absolute; 
line-height: 30px; 
}