本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果。分享给大家供大家参考。具体如下:
这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/
具体代码如下:
自动固定顶部的悬浮菜单栏代码 *{margin:0;padding:0;} ul,li{list-style:none;} #content{width:600px;margin:0 auto;border:1px solid #f00;} ul li.item{width:400px;text-align:center;margin:20px 100px;background:#00f;color:#fff;font-size:14px;font-weight:bold;height:100px;line-height:100px;} #float_banner{position:absolute;top:0;left:50%;width:900px;margin-left:-450px;height:30px;line-height:30px;text-align:center;background:#000;color:#fff;font-size:14px;font-weight:bold;z-index:2;} 这里是顶部的横幅,随着页面滚动而浮动
- 第一块内容
- 第二块内容
- 第三块内容
- 第四块内容
- 第五块内容
- 第六块内容
- 第七块内容
- 第八块内容
- 第九块内容
- 第十块内容
希望本文所述对大家的Javascript程序设计有所帮助。



