固定在網頁頂部跟隨滾動條滑動而滑動的DIV層

-Advertisement-

在一個頁面放2個懸浮框，懸浮框隨頁面的上下滾動有上下波動的效果，最終固定在同一位置體驗效果：http://hovertree.com/texiao/jsstudy/1/代碼如下：JavScript頁面懸浮框- 何問起何問起特效原文效果在一個頁面放2個懸浮框，懸浮框隨頁面的上下滾動有上下波動的效果，...

在一個頁面放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

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

javascript: Jquery each loop with json array or object

json:{ "justIn": [{ "textId": "123", "text": "Hello,geovindu", "textType": "Greeting" },{ "textId": "514", "text":"What's up?", "textType": "Question"...
基於jQuery按鈕控制單排圖片切換代碼

基於jQuery按鈕控制單排圖片切換代碼。這是一款帶有左右箭頭按鈕控制的圖片動感滾動切換特效。效果圖如下：線上預覽源碼下載實現的代碼。html代碼： ...
瀏覽器環境下JavaScript腳本載入與執行探析之代碼執行順序

本文主要基於向HTML頁面引入JavaScript的幾種方式，分析HTML中JavaScript腳本的執行順序問題
jquery獲取form表單內容以及綁定數據到form表單

在日常開發的過程中，難免會用到form表單，我們需要獲取表單的數據保存到資料庫，或者拿到後臺的一串json數據，要將數據綁定到form表單上，這裡我寫了一個基於jquery的，formHelp插件，使用起來也很簡單：獲取表單的數據：$("#formid").serializeJson();綁定數據到...
微信掃碼顯示特效

微信掃碼顯示特效：下麵是實際效果：(可以自己移動滑鼠，嘗試效果)(由於篇幅長度，沒有加相容性首碼，演示環境為谷歌瀏覽器。)現在就一個一個效果單獨演示：演示demo的HTML內容為：魔芋CSS：div { width:200px; height:200px; background: red; marg...
JS繼承模式粗探

之前提到了JS中比較簡單的設計模式，在各種設計模式中被最常使用的工具之一就是原型鏈的繼承。作為OOP的特質之一——繼承，今天主要談談JS中比較簡單的繼承方法。最基礎的原型鏈繼承在這裡就不覆述了，主要講一下其他的繼承模式。1.借用構造函數繼承function Father (name) {...
nodejs events模塊

var EventEmitter = require('events').EventEmitter;var emitter = new EventEmitter();console.log(emitter.getMaxListeners());//設置可監聽事件的最大個數emitter.setMax...
HTML5填充顏色的fillStyle測試

效果:http://hovertree.com/texiao/html5/canvas/1/代碼： 1 2 3 4 15 測試fillStyle - 何問起16 17 18 19 20 21 22 何問起23 24 更多：http://www.cnblogs.com/roucheng/p...