网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
JS
】
自动固定顶部的悬浮菜单栏代码
作者:
dezai
/ 发布于
2013/12/5
/
415
自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧。
<!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>
评论列表
本站所提供的代码,版权归原作者所有,若有侵犯作者版权,请与我们联系,我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
dezai
贡献的其它代码
(
1065
)
.
双色球
.
列出所有物理网络适配器
.
快乐数的 Python 实现
.
计算当月还剩天数
.
猜属相
.
二十四小时时钟
.
每日一语
.
很酷的日历
.
超长日历表单
.
最简单的时钟
地图
本站
我们
服务
版权
联系
回馈
博客