在一个页面放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. Code First开发系列之领域建模和管理实体关系

    返回<8天掌握EF的Code First开发>总目录 本篇目录 理解Code First及其约定和配置 创建数据表结构 管理实体关系 三种继承模式 本章小结 自我测试 本篇的源码下载:点击 ...

  2. 从阿里巴巴IPO联想到创始人和资方关系

    [小九的学堂,致力于以平凡的语言描述不平凡的技术.如要转载,请注明来源:小九的学堂.cnblogs.com/xfuture] 5月7日,阿里巴巴于今日向美国证券交易委员会(SEC)提交了IPO(首次公 ...

  3. HTML、CSS、JS对unicode字符的不同处理

    unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 原文发表于这里 css表示法 首先来一段很常见的bootstrap的字体图标代码: . ...

  4. WCF学习之旅—WCF第二个示例（六）

    第五步,创建数据服务 在“解决方案资源管理器”中,使用鼠标左键选中“SCF.WcfService”项目,然后在菜单栏上,依次选择“项目”.“添加新项”. 在“添加新项”对话框中,选择“Web”节点,然 ...

  5. Linux内核目录结构

    arch 包括所有和体系结构相关的核心代码. include 包括编译内核所需要的大部分头文件 init 包含内核的初始化代码(不是系统的引导代码),有main.c和Version.c两个文件 mm ...

  6. 在MacOS 10.12上安装Tomcat8.5

    在MacOS 10.12上安装Tomcat8.5 原文链接:https://wolfpaulus.com/journal/mac/tomcat8/ Context 已安装Java,使用java -ve ...

  7. OPENVPN+MYSQL认证+客户端配置

    安装环境:ubuntu 12.04 x64 一 服务器端 1.安装openvpn及相应包 1 2 root@jkb:~# aptitude install openvpn root@jkb:~# ap ...

  8. Android音频开发之MediaRecorder/MediaPlayer

    前言: 上次我们介绍了实时采集音频数据以及播放,今天我们来认识一下直接录制文件的方式. 直接上代码:录制管理类 public class MediaRecorderManager { public s ...

  9. 窥探Swift编程之错误处理与异常抛出

    在Swift 2.0版本中,Swift语言对其错误处理进行了新的设计,当然了,重新设计后的结果使得该错误处理系统用起来更爽.今天博客的主题就是系统的搞一下Swift中的错误处理,以及看一下Swift中 ...

  10. Why is HttpContext.Current null after await?

    今天在对项目代码进行异步化改进的时候,遇到一个奇怪的问题(莫笑,以前没遇过),正如标题一样,HttpContext.Current 在 await 异步执行之后,就会变为 null. 演示代码: pu ...