使用Javascript制作一个始终可见的区域

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;
      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