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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
微信小程序实现左右列表联动
May 19 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
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
第十二节 类的自动加载 [12]
2006/10/09 PHP
cache_lite试用
2007/02/14 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
Python continue语句用法实例
2014/03/11 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
10个顶级Python实用库推荐
2021/03/04 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
办护照工作证明范本
2014/01/14 职场文书
政协会议宣传标语
2014/10/09 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers