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 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
Angularjs 基础入门
Dec 26 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
JS函数基本定义与用法示例
Jan 15 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
Js+XML 操作
2006/09/20 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
Python Mysql自动备份脚本
2008/07/14 Python
python使用7z解压apk包的方法
2015/04/18 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
使用Python实现画一个中国地图
2019/11/23 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
《走一步再走一步》教学反思
2014/02/15 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
学校少先队工作总结
2015/08/12 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技