当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.
当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div1 { height:2000px; } .div2 { width:100%; height:35px; background-color:#3399FF; margin-top:100px; } .div2_1{ position:fixed; width:100%; height:35px; z-index:999; background-color:#3399FF; top:0px; _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop)); } .div2_2 { display:none; } </style> <script type="text/javascript"> window.onscroll=function(){ var t=document.documentElement.scrollTop||document.body.scrollTop; var div2=document.getElementById("div2"); if(t>= 100){ div2.className = "div2_1"; }else{ div2.className = "div2"; } } </script> </head> <body> <div class="div1"> <div id="div2" class="div2"></div> </div> </body> </html>
时间: 2024-10-12 02:50:36