在一个页面放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. ExtJS扩展：扩展grid之toolbar button禁用表达式

          在前一篇文章我们扩展了grid通过选中记录数来禁用toolbar上的按钮,有时候我们需要通过记录中的数据来决定是否禁用按钮,今天我们就来扩展它.       照例,最新的代码和例子都在gi ...

  2. F.I.S初探（前端工程化）

    云笔记:http://note.youdao.com/share/?id=7c4a2dcf118f0ad7bb52a36aaee46a7a&type=note   一.初识FIS 在做项目中遇 ...

  3. Tempdb initial size和dbcc shrinkfile

    在使用sql server时您可能遇到过下面的情况,tempdb的数据文件初始大小为3mb, 随着对tempdb的使用,tempdb文件逐渐变得很大(例如30GB),导致了磁盘空间不足. 此时您需要立 ...

  4. RxJava 备注

    RxJava是一个采用观察者模式的异步框架,本文给出几个基本的使用例子. 1.配置依赖: compile 'io.reactivex:rxjava:1.0.14' compile 'io.reacti ...

  5. ASP.Net请求处理机制初步探索之旅 - Part 5 ASP.Net MVC请求处理流程

    好听的歌 我一直觉得看一篇文章再听一首好听的歌,真是种享受.于是,我在这里嵌入一首好听的歌,当然你觉得不想听的话可以点击停止,歌曲 from 王菲 <梦中人>: --> 开篇:上一篇 ...

  6. Nodejs之MEAN栈开发（三）---- 使用Mongoose创建模型及API

    继续开扒我们的MEAN栈开发之路,前面两节我们学习了Express.Jade引擎并创建了几个静态页面,最后通过Heroku部署了应用. Nodejs之MEAN栈开发(一)---- 路由与控制器 Nod ...

  7. iOS开发系列--Objective-C之协议、代码块、分类

    概述 ObjC的语法主要基于smalltalk进行设计的,除了提供常规的面向对象特性外,还增加了很多其他特性,这一节将重点介绍ObjC中一些常用的语法特性.当然这些内容虽然和其他高级语言命名不一样,但 ...

  8. iOS开发系列--Objective-C之KVC、KVO

    概述 由于ObjC主要基于Smalltalk进行设计,因此它有很多类似于Ruby.Python的动态特性,例如动态类型.动态加载.动态绑定等.今天我们着重介绍ObjC中的键值编码(KVC).键值监听( ...

  9. 利用Hexo搭建个人博客－博客发布篇

    通过 <利用Hexo搭建个人博客-环境搭建篇> 以及 <利用Hexo搭建个人博客-博客初始化篇>,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如 ...

  10. jsp 分页， 判断是第一页，和最后一页.

    <% //页的行数 int pagesize =20; //当前页 int currentPage = 1; try { currentPage = Integer.parseInt(reque ...