在一個頁面放2個懸浮框，懸浮框隨頁面的上下滾動有上下波動的效果，最終固定在同一位置
效果展示如下所示：
代碼如下：
<!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 >何問起</a> <a >特效</a></div><div id="div2"><a >原文</a><a >效果</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>下面給大家分享一段代碼頁面頂端固定div，不隨滾動條移動，提示瀏覽器信息
例子1：
<html><head><style type="text/css">#topNavWrapper {height: 29px;margin: 0px auto;min-width:1000px;z-index:100;_position: relative ;_top:0px; }#topNav {width:100%;display: block;z-index: 100;overflow: visible;position: fixed;top: 0px; _position: absolute;_top: expression(documentElement.scrollTop-5 + "px");background-color:#EBEBEB;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#D0D0D0;height: 28px;min-width:1000px;}#top{margin: 0px auto;width:1000px;position:relative;} .left{left:5px;top:6px;width:200px;position:absolute;}.leftlx{left:205px;top:6px;width:300px;position:absolute;}.right{left:830px;top:6px;width:170px;position:absolute;}#top a{text-decoration: none;color:#747474;}#top a:hover{color: blue;text-decoration: underline;}</style></head><body><div id="topNavWrapper"><div id="topNav"><div id="top"><div class="left">您好!歡迎來到....^ ^</div><div class="leftlx"><a href="about.aspx?id=1">[聯系我們]</a> 客戶服務熱線: 400-699-1111</div><div class="right"><table cellpadding="0" cellspacing="0"><tr><td><a href="#">簡體中文</a></td><td>|</td><td><a href="big5.html">繁體中文</a></td><td>|</td><td><a onclick='window.external.addFavorite("http://www.xxxx.com","xxxx")' href="#">收藏本站</a></td></tr></table></div></div></div></div></body></html>例子2：
<style type="text/css">{margin: 0px;padding: 0px;}body {background-attachment: fixed; /* prevent screen flash in IE6 */}#topNavWrapper {width: 100%;text-align: left;height: 28px;margin: 0px auto;z-index:100;_position: relative ;_top:0px;}#topNav {width: 100%;float: left;display: block;z-index: 100;overflow: visible;position: fixed;top: 0px; /* position fixed for IE6 */_position: absolute;_top: expression(documentElement.scrollTop + "px");height: 28px;}</style>新聞熱點
疑難解答
