在一个页面放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. SQL Server定时自动抓取耗时SQL并归档数据发邮件脚本分享

    SQL Server定时自动抓取耗时SQL并归档数据发邮件脚本分享 第一步建库和建表 USE [master] GO CREATE DATABASE [MonitorElapsedHighSQL] G ...

  2. 三种观察者模式的C#实现

    系列主题:基于消息的软件架构模型演变 说起观察者模式,估计在园子里能搜出一堆来.所以写这篇博客的目的有两点: 观察者模式是写松耦合代码的必备模式,重要性不言而喻,抛开代码层面,许多组件都采用了Publ ...

  3. CPU占用率呈正弦实现,及实时输出进程和线程的CPU占用率

    CPU占用率呈正弦实现,及实时输出进程和线程的CPU占用率 #include "stdafx.h" #include <windows.h> #include < ...

  4. C#设计模式-代理模式

    在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让代理对象代替 ...

  5. iOS-----Crash文件分析(一)

    开发程序的过程中不管我们已经如何小心,总是会在不经意间遇到程序闪退.脑补一下当你在一群人面前自信的拿着你的App做功能预演的时候,流畅的操作被无情地Crash打断.联想起老罗在发布Smartisan ...

  6. MyBatis参数绑定规则及原理分析

    MyBatis参数的传递有几种不同的方法,本文通过测试用例出发,对其中的方式进行总结和说明,并对其部分源码进行分析. 一.测试用例(环境参考之前博客SSM接口编程一文 http://www.cnblo ...

  7. 读书笔记-you-don't-konw-js

    第一部分:作用域和闭包 不要满足于只是让代码正常工作,而是弄清楚为什么是这样 作用域是什么 定义的变量存储在哪里?程序是如何找到变量的?实现的 规则就是作用域 传统编译语言执行前的编译三步骤(p5) ...

  8. 09 web开发高级应用（1）

    - 1 <base> 标签用法 ```base: 为页面上的所有链接规定默认地址或默认目标target: 跳转到的目标页 <base target=_blank> <!- ...

  9. 【Win10 应用开发】人脸识别

    可能你会认为人脸识别用起来会很复杂,老周当初也这么想,但通过实际操作后,我发现非然. 经过微软封装的东西,向来都是复杂问题简单化,只要用得舒心,代码越少越好,用最少的代码做最多的事情,此为大师境界也. ...

  10. jQuery源码分析系列：Callback深入

    关于Callbacks http://www.cnblogs.com/aaronjs/p/3342344.html $.Callbacks()的内部提供了jQuery的$.ajax() 和 $.Def ...