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 相关文章推荐
提示$ is not defined错误分析及解决
Apr 09 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
js实现简单计算器
Nov 22 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
express 项目分层实践详解
Dec 10 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php 类自动载入的方法
2015/06/03 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
页面中js执行顺序
2009/11/09 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python实现中值滤波去噪方式
2019/12/18 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python中round函数如何使用
2020/06/19 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
20年同学聚会感言
2014/02/03 职场文书
班班通项目实施方案
2014/02/25 职场文书
剪彩仪式主持词
2014/03/19 职场文书
年终晚会主持词
2014/03/25 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
房地产广告策划方案
2014/05/15 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
教师节晚会主持词
2015/06/30 职场文书