基于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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
js创建对象的方式总结
2015/01/10 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
管理专员自荐信
2014/01/26 职场文书
家教广告词
2014/03/19 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
学习计划书怎么写
2014/09/15 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
基于Python实现一个春节倒计时脚本
2022/01/22 Python
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python