基于JavaScript实现div层跟随滚动条滑动
在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置
效果展示如下所示:
代码如下:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>JavScript页面悬浮框-何问起</title><basetarget="_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> <divid="div1"><ahref="http://hovertree.com">何问起</a><ahref="http://hovertree.com/texiao/">特效</a></div> <divid="div2"><ahref="http://hovertree.com/h/bjaf/mbrpxe4o.htm">原文</a> <ahref="http://hovertree.com/texiao/jsstudy/1/">效果</a> </div> <divid="hovertree"style="position:fixed;top:100px;left:40%;z-index:99;height:100px;width:100px;background-color:silver"></div> <div>在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置</div> <script> varh_div1=document.getElementById('div1'),h_div2=document.getElementById('div2'); varh_hvttop=200; window.onscroll=function(){ HoverTreeMove(h_div1,h_hvttop) HoverTreeMove(h_div2,h_hvttop) //显示信息 varh_scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滚动的距离 varh_hovertree=document.getElementById('hovertree'); h_hovertree.innerHTML=h_div1.offsetTop+"hovertree<br/>"+h_scrollTop+"<br/>"+h_div1.style.top; }; functionHoverTreeMove(obj,top) { varh_scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滚动的距离 varh_buchang=20; if(obj.offsetTop<h_scrollTop+top-h_buchang) { obj.style.top=obj.offsetTop+h_buchang+"px"; setTimeout(function(){HoverTreeMove(obj,top);},80); } elseif(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> <styletype="text/css"> #topNavWrapper{ height:29px; margin:0pxauto; 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:0pxauto; 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; } #topa { text-decoration:none; color:#747474; } #topa:hover { color:blue; text-decoration:underline; } </style> </head> <body> <divid="topNavWrapper"> <divid="topNav"> <divid="top"> <divclass="left">您好!欢迎来到....^^</div><divclass="leftlx"><ahref="about.aspx?id=1">[联系我们]</a> 客户服务热线:400-699-1111</div> <divclass="right"> <tablecellpadding="0"cellspacing="0"><tr><td><ahref="#">简体中文</a></td><td>|</td><td><ahref="big5.html">繁体中文</a></td> <td>|</td><td><aonclick='window.external.addFavorite("http://www.xxxx.com","xxxx")'href="#">收藏本站</a></td></tr></table> </div> </div> </div> </div> </body> </html>
例子2:
<styletype="text/css"> { margin:0px; padding:0px; } body{ background-attachment:fixed;/*preventscreenflashinIE6*/ } #topNavWrapper{ width:100%; text-align:left; height:28px; margin:0pxauto; z-index:100; _position:relative; _top:0px; } #topNav{ width:100%; float:left; display:block; z-index:100; overflow:visible; position:fixed; top:0px;/*positionfixedforIE6*/ _position:absolute; _top:expression(documentElement.scrollTop+"px"); height:28px; } </style>