JS实现自动固定顶部的悬浮菜单栏效果

本文实例讲述了射流研究…实现自动固定顶部的悬浮菜单栏效果。分享给大家供大家参考。具体如下：

这是一款自动固定顶部的悬浮菜单栏代码，不管你如何拉动滚动条，它会始终显示在网页的最顶部，用作网站的顶级导航或公告之类的比较合适吧。

运行效果截图如下：

在线演示地址如下：

http://演示。jb51。net/js/2015/js-fix-top-float-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题自动固定顶部的悬浮菜单栏代码/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' * { margin :0；划水：0;}ul、李{列表式：无；} #内容{ width :600 pxmargin :0 auto order :1 px实心# f00} ul李。项目{宽度：400 px文本对齐：居中；边距3 336020 px 100 px背景技术# 00 fcolor : # ffffont-size :14 px；字体粗细：加粗；高度：100 px线高：100 px} # float _ banner { position : absolute；top:0左侧：50%;宽度宽度：900像素左边距：-450像素；高度：30 px线高：30 px文本对齐：居中；背景技术： # 000;color : # ffffont-size :14 px；字体粗细：加粗；z索引：2;}/style/head dydiv id=' float _ banner '这里是顶部的横幅，随着页面滚动而浮动/div ul id=' content ' Li class=' item '第一块内容/li li class='item '第二块内容/li li class='item '第三块内容/li li class='item '第四块内容/li li class='item '第五块内容/li li class='item '第六块内容/li li class='item '第七块内容/li li class='item '第八块内容/li li class='item '第九块内容/li li class='item '第十块内容/li/ulscript语言=' JavaScript ' var speed=100 var scrollTop=nullvar hold=0；var float _ bannervar pos=nullvar计时器=null var move height=null float _ banner=document。getelementbyid(' float _ banner ')；窗户。on scroll=scroll _ ad函数scroll _ ad(){ scroll top=document。文档元素。滚动顶部文档。尸体。滚动顶部；pos=滚动顶部-浮动_横幅。偏移；pos=pos/10 moveHeight=pos0？数学。天花板(位置): ath。楼层(pos)；if(moveHeight！=0){ float _ banner。风格。top=float _ banner。偏移移动高度' px '；setTimeout(roll _ ad，速度);}//alert(滚动顶部)；}/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。