html+css+js 固定的底部悬浮菜单栏
来源:互联网 发布:轻而易举瓷砖设计软件 编辑:程序博客网 时间:2024/05/16 12:30
<!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:fixed;top:0;left:50%;width:150px;margin-left:-450px;height:250px;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>
<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 = float_banner.offsetTop;//前面加scrollTop - 跟随一起滚动
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>
"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:fixed;top:0;left:50%;width:150px;margin-left:-450px;height:250px;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>
<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 = float_banner.offsetTop;//前面加scrollTop - 跟随一起滚动
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>
阅读全文
0 0
- html+css+js 固定的底部悬浮菜单栏
- html css html底部固定
- 自动固定顶部的悬浮菜单栏代码
- 自动固定顶部的悬浮菜单栏代码
- 纯CSS打造兼容各大浏览器的底部固定悬浮导航
- CSS+JS 悬浮固定菜单效果
- CSS+JS 悬浮固定菜单效果
- android底部悬浮菜单栏的设计与实现
- android 底部固定菜单栏的实现(一)
- 分享一个微信底部固定的菜单栏 超赞
- css 固定悬浮
- HTML+CSS悬浮图片固定到页面失效!
- 固定位置的Js悬浮窗口
- js 固定悬浮效果
- 手机wap页面底部固定条(html+css)
- HTML+CSS底部footer两种固定方式
- css 底部固定不起作用
- js鼠标悬浮实现菜单栏
- 细胞问题
- Java 中String,StringBuffer,StringBuilder的区别
- 数字签名是什么?
- 「职场套路」那些心照不宣的职场套路,工作多年还不知道?
- Unix/Linux 编程:网络编程之一 Socket
- html+css+js 固定的底部悬浮菜单栏
- tk.mapper mybatis 插件注意点
- 苹果详解规模化学习,利用「局部差分隐私」技术提升用户体验
- 转换流
- 块状链表 代码小记
- 欢迎使用CSDN-markdown编辑器
- 论文浅尝 | Leveraging Knowledge Bases in LSTMs
- Face paper:Light-Head R-CNN
- oliver的救援