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


Posted in Javascript onSeptember 16, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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>
<title>自动固定顶部的悬浮菜单栏代码</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{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;}
</style>
</head>
<body>
<div 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>
</ul>
<script language="javascript">
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.onscroll=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);
}
</script>
</body>
</html>

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

Javascript 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
初识Node.js
Sep 03 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 #Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 #Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 #Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 #Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 #Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 #Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 #Javascript
You might like
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
ant design实现圈选功能
2019/12/17 Javascript
python连接池实现示例程序
2013/11/26 Python
Python中字符串的格式化方法小结
2016/05/03 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
关于python字符串方法分类详解
2019/08/20 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
Python自动登录QQ的实现示例
2020/08/28 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
护士自我评价范文
2014/01/25 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
毕业典礼邀请函
2015/01/31 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
SQLServer之常用函数总结详解
2021/08/30 SQL Server
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript