精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

很多网站都使用了网站下拉导航条固定不动,如果只是让最顶部导航条下拉固定是非常简单的,单纯的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屏幕下拉固定导航菜单在顶部插件 超简单 超好用哦。

Tags:CSS 固定导航 下拉不动