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

体验效果：http://hovertree.com/texiao/jsstudy/1/

代码如下：

<!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>

开发技术文章收集 http://www.cnblogs.com/sosoft/p/kaifajishu.html

固定在网页顶部跟随滚动条滑动而滑动的DIV层的更多相关文章

  1. CSS Div固定在网页顶部、底部、左侧、右侧

    Div固定在网页顶部 .header { width:100%; height:80px; background-color:#FAFAFA; position:fixed; top:; left:; ...

  2. 把div固定在网页顶部

    很多网站都有把某一块固定在顶部的功能,今天上网搜搜然后自己又写了一遍,贴出来给大家看看,哪天用到的时候自己也可以随时看看 <!DOCTYPE html PUBLIC "-//W3C// ...

  3. jQuery粘性跟随滚动条滚动的导航栏源代码下载

    jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...

  4. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  5. JS网页顶部弹出可关闭广告图层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. link标签和script标签跑到body下面，网页顶部有空白

    用UltraEdit的16进制编辑模式查看代码,都是EF BB BF开头的,说明都是带BOM的.我手动的将所有文件转成UTF-8 without BOM.页面终于正常了.link,script标签乖乖 ...

  7. &#65279导致网页顶部空白一行的解决办法【实测有效】

    我用织梦做的网站,出现了&#65279导致网页顶部空白一行的问题.通过搜索,了解到这原来是UTF-8的BOM的问题. &#65279导致网页顶部空白一行原因 这个问题只会在chrome ...

  8. CSS实现事件穿透与背景图不跟随滚动条

    1. 事件穿透属性:pointer-events: none  // auto默认值.none:不捕捉target事件(实现穿透) 用途:当需要使用透明遮罩并且允许点击遮罩下方元素时,或需要使用背景容 ...

  9. 页面固定DIV层CSS代码

    有时候为了用户体验更好些,网页设计师会把网站导航放在一个固定的DIV层里面,不随滚动条滚动.本方法是利用CSS,position:fixed属性来固定层,fixed是特殊的absolute,即fixe ...

随机推荐

  1. 验证码类库CaptchaMvc

    CaptchaMvc是一个有弹性的.简单的解决方案,它能够解决你项目中所有与验证码相关的问题.你需要做的所有事情就是向你的项目中添加一个类库,添加之后验证码就准备就绪了.该项目拥有使用验证码所需要的所 ...

  2. io.js入门（二）—— 所支持的ES6（上）

    io.js的官网上有专门介绍其所支持的ES6特性的页面(点我查看),上面介绍到,相比nodeJS,io.js已从根本上支持了新版V8引擎上所支持的ES6特性,无需再添加任何运行时标志(如 --harm ...

  3. 基于存储过程的MVC开源分页控件--LYB.NET.SPPager

    摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...

  4. jws.mono脚本安装详解

    就在最近两天,最新版本的jws.mono上线了,这个版本除了提供与之前版本拥有的功能外,还额外提供了一个“自动化”的安装脚本,通过执行该脚本,jws.mono将自动快速的安装到指定的目录,同时,通过改 ...

  5. Maven常用插件

    maven利用各种插件来管理构建项目,本文记录下工作中常用到的插件及使用方法.每个插件都会提供多个目标(goal),用于标示任务.各插件配置在pom.xml里,如下: <build> [. ...

  6. [译]AngularJS中DOM操作

    再翻译一篇干货短文,原文:AngularJS jQuery 虽然Angularjs将我们从DOM的操作中解放出来了,但是很多时候我们还是会需要在controller/view加载之后执行一些DOM操作 ...

  7. Hello Blog

    转眼之间,工作已经快五年了. 五年走的时候不觉得,当真正过来了,一回头,才真正体会到什么叫时间匆匆. 做了五年的技术,算是多有波折.想一想,做技术真的挺需要耐得住寂寞的,毕竟花花世界,压力太大,诱惑太 ...

  8. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  9. OpenCASCADE Performance Test

    OpenCASCADE Performance Test eryar@163.com Abstract. Use the Draw Test Harness to test the performan ...

  10. C算法编程题（一）扑克牌发牌

    前言 上周写<我的编程开始(C)>这篇文章的时候,说过有时间的话会写些算法编程的题目,可能是这两天周末过的太舒适了,忘记写了.下班了,还没回去,闲来无事就写下吧. 因为写C++的编程题和其 ...