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 相关文章推荐
使用firebug进行调试javascript的示例
Dec 16 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
js运动事件函数详解
Oct 21 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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 水平的题目
2007/05/30 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
python中reader的next用法
2018/07/24 Python
python list格式数据excel导出方法
2018/10/31 Python
python3 简单实现组合设计模式
2020/07/02 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
物业经理求职自我评价
2013/09/22 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
会计核算科岗位职责
2014/03/19 职场文书
白酒营销策划方案
2014/08/17 职场文书
高一军训的心得体会
2014/09/01 职场文书
总经理司机岗位职责
2015/04/10 职场文书
小学班级口号大全
2015/12/25 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL