在一个页面放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 2012大幅增强T-SQL

    SQL Server 2012对T-SQL进行了大幅增强,其中包括支持ANSI FIRST_VALUE和LAST_VALUE函数,支持使用FETCH与OFFSET进行声明式数据分页,以及支持.NET中 ...

  2. ABP理论学习之模块系统

    返回总目录 本篇目录 模块介绍 生命周期事件 模块依赖 自定义模块方法 模块介绍 ABP提供了构建模块并将这些模块组合起来创建应用的基础设施.一个模块可以依赖另一个模块.一般来说,一个程序集可以认为是 ...

  3. Hadoop学习笔记—6.Hadoop Eclipse插件的使用

    开篇:Hadoop是一个强大的并行软件开发框架,它可以让任务在分布式集群上并行处理,从而提高执行效率.但是,它也有一些缺点,如编码.调试Hadoop程序的难度较大,这样的缺点直接导致开发人员入门门槛高 ...

  4. JavaScript面试时候的坑洼沟洄——逗号、冒号与括号

    看完了javaScript数据类型和表达式与运算符相关知识后以为可以对JavaScript笔试题牛刀小试一把了,没想到有一次次的死在逗号,冒号和括号上,不得已再看看这几个符号吧. 逗号 逗号我们常见的 ...

  5. enum操作--获取枚举里的最大值

    一个应用系统,如果程序里没有任何enum的使用,我认为它的可读性是有待商榷的. 求枚举里的最大/最小枚举值, 其实是对Array进行操作: enum EnumTest { ddd = , eee } ...

  6. iOS—Xcode 7真机测试

    Xcode 7真机测试详解 1.准备 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题:could not find developer disk im ...

  7. IOS下载查看PDF文件(有下载进度)

    IOS(object-c) 下载查看 PDF 其实还是蛮容易操作的.在下载前,首先要把 IOS 可以保存文件的目录给过一遍: IOS 文件保存目录 IOS 可以自定义写入的文件目录,是很有限的,只能是 ...

  8. JAVA基础代码分享--求圆面积

    问题描述 用户输入圆的半径,计算并显示圆的面积 代码分享 /** * @author hpu-gs * 2015/11/25 */ public class Circle { public stati ...

  9. ASP.NET WebAPi（selfhost）之文件同步或异步上传

    前言 前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+WebAPi来进行文件的同步或者异步上传,顺便回顾下css和js,MVC作为客 ...

  10. BFC之浅析篇

    BFC是什么呢? 掏粪男孩? 当然不是咯.BFC,英文名Block formatting context,直译为“块级格式化上下文”.它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进 ...