随浏览器大小绝对固定。
待更新：在初时隐藏，滚动条下拉时出现。
效果图：
JS代码：
function browserWidth() { if (self.innerWidth) { return self.innerWidth - 20; } else { return document.body.clientWidth; } return 800; } function Leftonload() { var wt = browserWidth() + 10; if (wt > 960) { wt = (wt - 960) / 2 + 475 + "px"; document.getElementById("box").style.left = wt; //距离左端 document.getElementById("box").style.top = "420"; //距离顶部 //输出 var sh = document.body.scrollHeight + "." + window.screenTop; sh += "." + document.getElementById("box").style.top; document.getElementById("show").innerHTML = sh; } else { return false; } } window.onload = function() { Leftonload() } //通用body onload方法 // function LoadattachEvent(o, name, fun)//更兼容的body onload方法 // { return document.all ? o.attachEvent(name,fun) : o.addEventListener(name.substr(2),fun,false); } LoadattachEvent(window,"onload",functionName);
CSS代码：
* { margin: 0; padding: 0; } html { _overflow: hidden; } body { _height: 100%; _overflow-y: auto; } #box { width: 100px; height: 100px; background-color: #aeaeae; position: fixed; _position: absolute; }
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>跨浏览器固定定位</title> </head> <body> <div style=" height:1500px" mce_style=" height:1500px"> </div> <div id="box"> <div id="show"></div> <a οnclick="onload();">点击</a> </div> </body> </html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
