基于JavaScript实现div层跟随滚动条滑动


Posted in Javascript onJanuary 12, 2016

在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置

效果展示如下所示:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavScript页面悬浮框- 何问起</title><base target="_blank" />
<style>
body {
height: 2000px;
}
#div1 {
width: 100px;
height: 150px;
background: red;
position: absolute;
right: 0;
top:200px;
}
#div2 {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 200px;
}a{color:white}
</style>
</head>
<body>
<div id="div1"><a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/texiao/">特效</a></div>
<div id="div2"><a href="http://hovertree.com/h/bjaf/mbrpxe4o.htm">原文</a>
<a href="http://hovertree.com/texiao/jsstudy/1/">效果</a>
</div>
<div id="hovertree" style="position:fixed;top:100px;left:40%;z-index:99;height:100px;width:100px;background-color:silver"></div>
<div>在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置</div>
<script>
var h_div1 = document.getElementById('div1'), h_div2 = document.getElementById('div2');
var h_hvttop = 200;
window.onscroll = function () {
HoverTreeMove(h_div1, h_hvttop)
HoverTreeMove(h_div2, h_hvttop)
//显示信息
var h_scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动的距离
var h_hovertree = document.getElementById('hovertree'); 
h_hovertree.innerHTML = h_div1.offsetTop + " hovertree<br /> " + h_scrollTop + "<br />" + h_div1.style.top;
};
function HoverTreeMove(obj,top)
{
var h_scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动的距离
var h_buchang = 20;
if (obj.offsetTop < h_scrollTop + top - h_buchang)
{
obj.style.top = obj.offsetTop + h_buchang + "px";
setTimeout(function () { HoverTreeMove(obj, top); }, 80);
}
else if (obj.offsetTop > h_scrollTop + top + h_buchang)
{
obj.style.top = (obj.offsetTop - h_buchang) + "px";
setTimeout(function () { HoverTreeMove(obj, top); }, 80);
}
else {
obj.style.top = h_scrollTop + top + "px";
}
}
HoverTreeMove(h_div1, 200)
HoverTreeMove(h_div2, 200)
</script>
</body>
</html>

下面给大家分享一段代码页面顶端固定div,不随滚动条移动,提示浏览器信息

例子1:

<html>
<head>
<style type="text/css">
#topNavWrapper {
height: 29px;
margin: 0px auto;
min-width:1000px;
z-index:100;
_position: relative ;
_top:0px; 
}
#topNav 
{
width:100%;
display: block;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px; 
_position: absolute;
_top: expression(documentElement.scrollTop-5 + "px");
background-color:#EBEBEB;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#D0D0D0;
height: 28px;
min-width:1000px;
}
#top
{
margin: 0px auto;
width:1000px;
position:relative;
} 
.left
{
left:5px;
top:6px;
width:200px;
position:absolute;
}
.leftlx
{
left:205px;
top:6px;
width:300px;
position:absolute;
}
.right
{
left:830px;
top:6px;
width:170px;
position:absolute;
}
#top a
{
text-decoration: none;
color:#747474;
}
#top a:hover
{
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="topNavWrapper">
<div id="topNav">
<div id="top">
<div class="left">您好!欢迎来到....^ ^</div><div class="leftlx"><a href="about.aspx?id=1">[联系我们]</a>  客户服务热线: 400-699-1111</div>
<div class="right">
<table cellpadding="0" cellspacing="0"><tr><td><a href="#">简体中文</a></td><td>|</td><td><a href="big5.html">繁体中文</a></td>
<td>|</td><td><a onclick='window.external.addFavorite("http://www.xxxx.com","xxxx")' href="#">收藏本站</a></td></tr></table>
</div>
</div>
</div>
</div>
</body>
</html>

例子2:

<style type="text/css">
{
margin: 0px;
padding: 0px;
}
body {
background-attachment: fixed; /* prevent screen flash in IE6 */
}
#topNavWrapper {
width: 100%;
text-align: left;
height: 28px;
margin: 0px auto;
z-index:100;
_position: relative ;
_top:0px;
}
#topNav {
width: 100%;
float: left;
display: block;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px; /* position fixed for IE6 */
_position: absolute;
_top: expression(documentElement.scrollTop + "px");
height: 28px;
}
</style>
Javascript 相关文章推荐
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
学习vue.js条件渲染
Dec 03 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
JavaScript继承模式粗探
Jan 12 #Javascript
轻松实现Bootstrap图片轮播
Apr 20 #Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 #Javascript
学习JavaScript设计模式之策略模式
Jan 12 #Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 #Javascript
jQuery版本升级踩坑大全
Jan 12 #Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 #Javascript
You might like
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
德生PL660的电路分析和打磨
2021/03/02 无线电
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
javascript实现随机生成DIV背景色
2016/06/20 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
python+pyqt实现右下角弹出框
2017/10/26 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python简单实现AES加密和解密
2019/03/28 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
实习生自我鉴定范文
2013/12/05 职场文书
交通安全教育制度
2014/02/02 职场文书
市场营销专业自荐书
2014/06/10 职场文书
高中军训的心得体会
2014/09/01 职场文书
老兵退伍标语
2014/10/07 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
律政俏佳人观后感
2015/06/09 职场文书
小型婚礼主持词
2015/06/30 职场文书
导游词之长城八达岭
2019/09/24 职场文书