Question

如何让CSS导航固定在页面顶端。

CSS导航。怎么固定在页面的顶端，和校内天涯类似的导航。

Answer 1

置顶的优点

1.减少跳出率：如果是从搜寻引擎而来的访客，对我们网站不熟，文章读完、资料找到后，没有个吸引注意力的设计，通常就直接离开了。那么如果浮动导览列恰巧有个访客有兴趣的主题，就有机会留住这位客人了。

2.随时提供导航：不是每个上网的人都很熟悉网站的构造、摆设位置等，那么这个浮动导览列只要项目设计得好，就能让这位迷途羔羊的网路生手有一个很好的重点指引。

3.节省操作：导览列置顶可以省去按「回到顶端」这个按钮，网页可以少安装、执行一个区块，而且「回到顶端」按钮有时会遮住一些文字。

实现方法

导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种，这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现

注意：dispaly:fixed；会使元素脱离文档，不占据文档空间。所以页面会有一些跳动，这时可以给相邻元素加上nav所占高度的margin-top或padding-top即可

（1）“导航栏下拉至一定高度后固定在顶部的特效”，也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码：

将这个js放到要实现效果的页面里面去，然后我们要修改的是第三行的.nav，“nav“改成你自己页面导航栏的class；第七行的”100“为下拉到100个像素的时候触发特效，可以自行修改至合适的高度。

（2）然后在css文件里面增加这个属性：

这样就差不多完成了。

讲下这个js的意思，判断下拉到一定高度的时候，给导航栏的div插入一个”fixednav“属性，然后给”fixednav“加上固定在顶部的参数。

Answer 2

这个需要用到css的position属性。如下这个示例：

假设导航的class为nav，将其固定在页面顶部可以这样写：

.nav{width:100%;height:30px;position:fixed;top:0;left:0;}

其中高宽请根据实际情况修改。

Answer 3

可以参考一下css实现滚动页面导航栏固定在顶部（吸顶效果）

Answer 4

<div id="menu">导航内容</div>，然后设置div，用绝对定位来直接给定导航的位置

width:200px;
height:100px;
border:1px solid #FF0000;

/*绝对定位*/
position:absolute;
background:#FFFFFF;
/*距左边距离*/
left:50px;
/*距顶端边距离*/
top:200px;
/*与其它Div层次的排列*/
z-index:50;

Answer 5

首先
body {
margin:0;
padding:0;
}

然后:<div id="menu">导航内容</div>

#menu {
width:800px;
height:30px;
margin:0 auto;
}