在我们浏览网页时，当页面很长很长需要下拉时，应该无法查看上面的导航内容，然而很多网站下拉后上面的菜单会变成浮动的样子，依旧在顶部悬浮，这是怎样实现的呢？
一般情况下要想实现导航菜单在网页下拉后置顶的效果，需要采用绝对定位的方式，代码如下：
html部分：
<div id="caidan">这里是导航置顶的菜单内容</div>
<div id="neirong">
网页的内容
</div>
首先页面分为置顶的菜单与填充的内容两个部分，将两个元素的id分别命名为caidan与neirong
接下来是CSS代码：
<style type="text/css">
#neirong{
width:100%;
height:1800px;
background: #0068C9;
}
#caidan{
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
z-index:999;
}
</style>
设置id为neirong的元素宽度为100%，高度为1800px,颜色为#0068C9，使得整个页面内容超出当前屏幕窗口，支撑起下拉滚动条.
在设置用于存放网页菜单导航的caidan,position定位为绝对定位fixed，表示相对于当前的浏览器窗口定位，相当于把这个导航菜单固定在了指定的位置，top距离窗口顶部为0px,left左边距离为0px,width宽度为百分之百，height高度为50px,z-index层叠顺序为999,防止下拉后被其它层叠顺序大的元素遮挡.
以上代码就能简单实现导航菜单置顶的效果，但是那是相对于导航直接在顶部的情况，那么如果在导航菜单上面还有head图片之类的，如果单单使用css的绝对定位，无法直接与窗口顶部的距离为0，会影响体验,这时候我们可以使用js来解决.
<div id="tupiannr">图片内容</div>
<div id="caidan2">这里是导航置顶的内容2</div>
<div id="neirong2">
网页的内容2
</div>
首先页面分为置顶的菜单与填充的内容两个部分，将两个元素的id分别命名为caidan与neirong
接下来是CSS代码：
<style type="text/css">
#tupiannr{
width:100%;
height:90px;
background:#00850c;
}
#neirong2{
width:100%;
height:1800px;
background: #0068C9;
}
#caidan2{
left:0;
width:100%;
height:50px;
z-index:999;
}
</style>
<script type="text/javascript">
var gdt = document.getElementById('caidan2');
window.onscroll = function() {
var gd=document.body.scrollTop;
if(gd>90){
gdt.style.position="fixed";
gdt.style.top="0";
}else{
gdt.style.position="";
gdt.style.top="";
}
}
</script>
通过document.getElementById('caidan2');拾取对象caidan2，然后 window.onscroll检测浏览器滚动条滚动状态.
当检测到页面滚动时，document.body.scrollTop获得滚动条距离顶部距离，当超出90px时，则将对象gdt的position属性定位设置为距离顶部的绝对定位，距离顶部窗口为0px，当页面滚动条重新回到顶部是清除刚才添加的css绝对定位置顶的属性.
js检测的滚动状态与css代码的绝对定位结合，这样我们就能够实现一个实用的导航栏置顶的效果.