纯CSS实现固定导航栏下拉不动

很多网站都使用了网站下拉导航条固定不动，如果只是让最顶部导航条下拉固定是非常简单的，单纯的CSS就可以实现，下面编程之家跟大家分享下：纯CSS实现固定导航栏下拉不动。

CSS代码如下

HTML代码部分：<div id="mbnav1"></div>

#mbnav1{ width:100%; height:50px; background:#1c7eca;position:fixed; top:0px; left:0px; z-index:999px;}

导航条固定在顶部不动

在IE789，chrome,fox下浏览，正常，但在IE6下不行，不过话说现在IE6也基本没有有的了。其实完全可以忽略不计了。下面还是讲下IE6的解决方案。

IE6以上版本的IE浏览器及其他主流浏览器都是支持“position:fixed”的，但是IE6却不支持它。幸好，IE6 支持“position:absolute” 和 Internet Explorer 的CSS表达式(expression)。所以，对于别的浏览器，我们可以用“position:fixed” 进行固定定位，而对于IE6，我们可以用“position:absolute” 和CSS表达式，

IE6的解决方法

/*ie6下样式，加下划线表示只针对ie6 的hack*/  _position:absolute; /* 把导航栏位置定义为绝对位置 */  _top:expression(eval(document.documentElement.scrollTop)); /* 把导航栏位置放在浏览器垂直滚动条的顶端 */

这种纯CSS实现的固定导航只适用于导航条在最顶端的。

如果你想实现导航条下拉到一定位置后再固定导航不动，或者固定某一个模块不动，推荐你使用：jquery屏幕下拉固定导航菜单在顶部插件 超简单 超好用哦。