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 相关文章推荐
javascript简易缓动插件(源码打包)
Feb 16 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
VUE v-model表单数据双向绑定完整示例
Jan 21 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乱码问题
2012/03/25 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
围观tangram js库
2010/12/28 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
python使用多进程的实例详解
2018/09/19 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
上海方立数码笔试题
2013/10/18 面试题
TCP/IP的分层模型
2013/10/27 面试题
什么是SCM(软件配置管理)
2014/08/16 面试题
医院护士的求职信
2014/01/03 职场文书
社区维稳工作方案
2014/06/06 职场文书
法学专业求职信
2014/07/15 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2015年女生节活动总结
2015/02/27 职场文书
欠款证明
2015/06/24 职场文书
Android Rxjava3 使用场景详解
2022/04/07 Java/Android