AN “Always Visible” area with JavaScript
转自：http://www.msjoe.com/2011/03/an-always-visible-area-with-javascript/
CSS:
#stickydiv {
position: fixed;
visibility: hidden;
height: 100px;
width: 200px;
background-color: Yellow;
}
HTML:
<div id="stickydiv">
This is always visible
</div>
Javascript:
<script type="text/javascript">
// Derived from http://www.javascriptkit.com/script/script2/alwayscombo.shtml
var stickydiv = {
location: ["top", "right"],
addoffset: [10, 15],
stickyid: "stickydiv",
positionstickydiv: function () {
var docElement = (document.compatMode == 'CSS1Compat') ?
document.documentElement : document.body;
if (this.location[0] == "top")
this.stickyelement.style.top = 0 + this.addoffset[0] + "px";
else if (this.location[0] == "bottom")
this.stickyelement.style.bottom = 0 + this.addoffset[0] + "px";
if (this.location[1] == "left")
this.stickyelement.style.left = 0 + this.addoffset[1] + "px";
else if (this.location[1] == "right")
this.stickyelement.style.right = 0 + this.addoffset[1] + "px";
},
init: function ()
{
this.stickyelement = document.getElementById(this.stickyid);
this.stickyelement.style.visibility = "visible";
this.positionstickydiv();
}
};
if (window.addEventListener)
{
window.addEventListener("load", function () { stickydiv.init(); }, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", function ()
{
stickydiv.init();
});
}
</script>
下载：Demo
再加上作者原文中的一个外部链接：http://west-wind.com/weblog/posts/388213.aspx
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。