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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

*{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;}

• 第一块内容
• 第二块内容
• 第三块内容
• 第四块内容
• 第五块内容
• 第六块内容
• 第七块内容
• 第八块内容
• 第九块内容
• 第十块内容

var speed = 100;

var scrollTop = null;

var hold = 0;

var float_banner;

var pos = null;

var timer = null;

var moveHeight = null;

float_banner = document.getElementById("float_banner");

window.οnscrοll=scroll_ad;

function scroll_ad(){

scrollTop = document.documentElement.scrollTop+document.body.scrollTop;

pos = scrollTop - float_banner.offsetTop;

pos = pos/10

moveHeight = pos>0?Math.ceil(pos):Math.floor(pos);

if(moveHeight!=0){

float_banner.style.top = float_banner.offsetTop+moveHeight+"px";

setTimeout(scroll_ad,speed);

}

//alert(scrollTop);

}

希望本文所述对大家的JavaScript程序设计有所帮助。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网