如何让CSS导航固定在页面顶端。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让CSS导航固定在页面顶端。相关的知识，希望对你有一定的参考价值。
CSS导航。怎么固定在页面的顶端，和校内天涯类似的导航。
置顶的优点
1.减少跳出率：如果是从搜寻引擎而来的访客，对我们网站不熟，文章读完、资料找到后，没有个吸引注意力的设计，通常就直接离开了。那么如果浮动导览列恰巧有个访客有兴趣的主题，就有机会留住这位客人了。
2.随时提供导航：不是每个上网的人都很熟悉网站的构造、摆设位置等，那么这个浮动导览列只要项目设计得好，就能让这位迷途羔羊的网路生手有一个很好的重点指引。
3.节省操作：导览列置顶可以省去按「回到顶端」这个按钮，网页可以少安装、执行一个区块，而且「回到顶端」按钮有时会遮住一些文字。
实现方法
导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种，这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现
注意：dispaly:fixed；会使元素脱离文档，不占据文档空间。所以页面会有一些跳动，这时可以给相邻元素加上nav所占高度的margin-top或padding-top即可
（1）“导航栏下拉至一定高度后固定在顶部的特效”，也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码：
将这个js放到要实现效果的页面里面去，然后我们要修改的是第三行的.nav，“nav“改成你自己页面导航栏的class；第七行的”100“为下拉到100个像素的时候触发特效，可以自行修改至合适的高度。
（2）然后在css文件里面增加这个属性：
这样就差不多完成了。
讲下这个js的意思，判断下拉到一定高度的时候，给导航栏的div插入一个”fixednav“属性，然后给”fixednav“加上固定在顶部的参数。
参考技术A这个需要用到css的position属性。如下这个示例：
假设导航的class为nav，将其固定在页面顶部可以这样写：
.navwidth:100%;height:30px;position:fixed;top:0;left:0;其中高宽请根据实际情况修改。
参考技术B可以参考一下css实现滚动页面导航栏固定在顶部（吸顶效果）
width:200px;
height:100px;
border:1px solid #FF0000;
/*绝对定位*/
position:absolute;
background:#FFFFFF;
/*距左边距离*/
left:50px;
/*距顶端边距离*/
top:200px;
/*与其它Div层次的排列*/
z-index:50; 参考技术D 首先
body
margin:0;
padding:0;
然后:<div id="menu">导航内容</div>
#menu
width:800px;
height:30px;
margin:0 auto;
动态悬浮导航
关键词scrollTop
首先，导航固定在距离页面顶端一定距离，随着下拉，导航会悬浮到最顶端
<style>
#daohang
{
width:100%;
height:60px;
background-color:#000;
position:relative;
top:0px;
left:0px;
opacity:0.6;}
</style>
<script>
var a = document.getElementById("pp");
window.onscroll=function(){
var aa=document.documentElement.scrollTop||document.body.scrollTop;
if(aa>110)
{
document.getElementById("daohang").style.position="fixed";
}
else
{
document.getElementById("daohang").style.position="relative";
}
}
</script>
</head>
<body>
<p style="font-size:36px;">你好</p>
<div id="daohang"></div>
<p id="pp">0px</p>
效果图如下
随着滚动条向下拉动，导航悬浮在最顶不再消失
以上是关于如何让CSS导航固定在页面顶端。的主要内容，如果未能解决你的问题，请参考以下文章