Question

我有一个宽度为80％的导航，当我滚动页面时，在某个时间点我将标题固定在顶部，当我这样做时，它浮动到左边而不是停留在中间。如何将导航保持在中心并固定在顶部。

HTML

<div id="foo">
</div>
<div id="nav">
</div>
<div id="bar">
</div>

CSS

#foo{
    height:100px;
    width:100%;
}
#bar{
    height:1000px;
    width:100%;
}

#nav{
    width: 80%;
    height: 100px;
    margin: 0 auto;
    background-color: #FFCC00;
}
.fixed-nav{
    position: fixed;
    top: 0;
}

脚本

var bottom = $('#nav').offset().top;
$(window).scroll(function(){    
    if ($(this).scrollTop() > bottom){ 
        $('#nav').addClass('fixed-nav'); 
    }
    else{
        $('#nav').removeClass('fixed-nav');
    }
});

以下是jsfiddle

中的代码

Answer 1

您需要以另一种方式居中导航。如果您设置了固定的width（在这种情况下为80％），则只需使用margin-left: 10%;代替margin: 0 auto;。

DEMO

注意：我还设置body{ margin: 0; }才能正常工作。

Answer 2

将left: 10%添加到.fixed-nav会解决此问题。此外，您需要在CSS中添加body { margin: 0px; }，否则#nav会在向下滚动时增大一些。

这是经过编辑的jsfiddle

如何在滚动中将导航固定到中心？

2 个答案: