导航栏会自动进入顶部

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