Full version: jsB@nk » Form » Table » Persistent Layer
URL: https://www.javascriptbank.com/persistent-layer.html
Float a layer on the screen so that it stays in place while a user scrolls the page. It has an animation script that slides the layer into position. Netscape 6 compatible!
Full version: jsB@nk » Form » Table » Persistent Layer
URL: https://www.javascriptbank.com/persistent-layer.html
<SCRIPT LANGUAGE="JavaScript">// Eddie Traversa (psych3@primus.com.au)<!-- Beginwindow.onerror = null;var topMargin = 300;var slideTime = 1200;var ns6 = (!document.all && document.getElementById);var ie4 = (document.all);var ns4 = (document.layers);function layerObject(id,left) {if (ns6) {this.obj = document.getElementById(id).style;this.obj.left = left;return this.obj;}else if(ie4) {this.obj = document.all[id].style;this.obj.left = left;return this.obj;}else if(ns4) {this.obj = document.layers[id];this.obj.left = left;return this.obj; }}function layerSetup() {floatLyr = new layerObject('floatLayer', pageWidth * .5);window.setInterval("main()", 10)}function floatObject() {if (ns4 || ns6) {findHt = window.innerHeight;} else if(ie4) {findHt = document.body.clientHeight; }} function main() {if (ns4) {this.currentY = document.layers["floatLayer"].top;this.scrollTop = window.pageYOffset;mainTrigger();}else if(ns6) {this.currentY =parseInt(document.getElementById('floatLayer').style.top);this.scrollTop = scrollY;mainTrigger();} else if(ie4) {this.currentY = floatLayer.style.pixelTop;this.scrollTop = document.body.scrollTop;mainTrigger(); }}function mainTrigger() {var newTargetY = this.scrollTop + this.topMargin;if ( this.currentY != newTargetY ) {if ( newTargetY != this.targetY ) {this.targetY = newTargetY;floatStart();}animator(); }}function floatStart() {var now = new Date();this.A = this.targetY - this.currentY;this.B = Math.PI / ( 2 * this.slideTime );this.C = now.getTime();if (Math.abs(this.A) > this.findHt) {this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY +this.findHt;this.A = this.A > 0 ? this.findHt : -this.findHt;}else {this.D = this.currentY; }}function animator() {var now = new Date();var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) +this.D;newY = Math.round(newY);if (( this.A > 0 && newY > this.currentY ) || ( this.A< 0 && newY < this.currentY )) {if ( ie4 )document.all.floatLayer.style.pixelTop = newY;if ( ns4 )document.layers["floatLayer"].top = newY;if ( ns6 )document.getElementById('floatLayer').style.top = newY +"px"; }}function start() {if(ns6||ns4) {pageWidth = innerWidth;pageHeight = innerHeight;layerSetup();floatObject();}else if(ie4) {pageWidth = document.body.clientWidth;pageHeight = document.body.clientHeight;layerSetup();floatObject(); }}// End --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><DIV id="floatLayer" style="border: 1px solid black; position: absolute; height:200px; width:200px; left:30px; top:1px;z-index: 100">This is a Floating Layer. Replace this content with your own.</DIV><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->