始终在网页顶部的导航条，仿天涯顶部固定层菜单

发布时间：2018-08-23 02:15:47 所属栏目：聚会来源：站长网

导读：始终在网页顶部的导航条，仿天涯顶部固定层菜单，大家在多玩、天涯等一些网站都看到过吧，以前烈火网就介绍了多玩的顶部固定菜单，还介绍了仿淘宝网的固定层，性质是一样的，不论你怎么拖动滚动条，始终显示在网页的最顶部，不随网页滚动条的滚动而滚动，

　　始终在网页顶部的导航条，仿天涯顶部固定层菜单，大家在多玩、天涯等一些网站都看到过吧，以前烈火网就介绍了多玩的顶部固定菜单，还介绍了仿淘宝网的固定层，性质是一样的，不论你怎么拖动滚动条，始终显示在网页的最顶部，不随网页滚动条的滚动而滚动，纯CSS代码实现。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>天涯顶部置顶工具条</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #topNavWrapper { width: 980px; text-align: left; height: 31px; margin: 0px auto; z-index:100; _position: relative ; _top:0px; } #topNav { width: 980px; float: left; display: block; z-index: 100; overflow: visible; position: fixed; top: 0px; /* position fixed for IE6 */ _position: absolute; _top: expression(documentElement.scrollTop + "px"); background-image: url(/uploads/allimg/1106/top_r.gif); background-repeat: no-repeat; background-position: right; height: 31px; } </style> </head> <body> <div id="topNavWrapper"> <ul class="jd_menu" id="topNav"> <li></li> </ul> </div> 请拖动右侧滚动条看效果 </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!