sticky.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. // Make a layer that stays in the same place on screen when scrolling the browser window.
  2. // Version 1.2
  3. // See http://www.mark.ac/help for browser support.
  4. var mySticky;
  5. var theLayer;
  6. // Setup variables for sliding.
  7. // lastY and staticYOffset should match your CSS top definition.
  8. lastY=10;YOffset=0;staticYOffset=10;refreshMS=25;
  9. // Setup function that runs when the page loads.
  10. function setup(eID){
  11. bw=new checkBrowser;
  12. if(bw.ns4||bw.opera){MM_reloadPage(true);}
  13. var noFix=bw.ie4||bw.ns4||(bw.macie50)?true:false;
  14. if (window.attachEvent){fix_bind()}
  15. else if(noFix){
  16. if(bw.ns6){document.getElementById(eID).style.position="absolute";}
  17. if(bw.macie50){document.getElementById(eID).style.position="absolute";document.getElementById(eID).style.backgroundColor="#ccffcc";}
  18. if(bw.ns6&&YOffset==0){YOffset=-15}
  19. mySticky=new makeLayerObj(eID);
  20. layerSlide(eID)}
  21. else{
  22. mySticky=new makeLayerObj(eID);
  23. mySticky.css.position="fixed";}
  24. if(!mySticky){mySticky=new makeLayerObj(eID);}
  25. //mySticky.css.visibility="visible";
  26. }
  27. // -------------------------
  28. // emulate css 'position: fixed' in IE5+ Win
  29. // code by aclover@1value.com
  30. fix_elements = new Array();
  31. function fix_event(){
  32. var i;
  33. for (i=0; i < fix_elements.length; i++){
  34. fix_elements[i].style.left = parseInt(fix_elements[i].fix_left)+document.getElementsByTagName('html')[0].scrollLeft+document.getElementsByTagName('body')[0].scrollLeft+'px';
  35. fix_elements[i].style.top = parseInt(fix_elements[i].fix_top)+document.getElementsByTagName('html')[0].scrollTop+document.getElementsByTagName('body')[0].scrollTop+'px';
  36. }
  37. }
  38. function fix_bind(){
  39. var i;
  40. for (i=0; i < document.all.length; i++){
  41. if (document.all[i].currentStyle.position=='fixed'){
  42. document.all[i].fix_left = document.all[i].currentStyle.left;
  43. document.all[i].fix_top = document.all[i].currentStyle.top;
  44. document.all[i].style.position = 'absolute';
  45. fix_elements[fix_elements.length] = document.all[i];
  46. window.attachEvent('onscroll', fix_event);
  47. window.attachEvent('onresize', fix_event);
  48. }
  49. }
  50. }
  51. // -------------------------
  52. // -------------------------
  53. // DHTML menu sliding. Requires checkBrowser()
  54. // Based on source at http://www.simplythebest.net/
  55. function layerSlide(layerID) {
  56. if(bw.dhtml){
  57. if(!mySticky){mySticky=new makeLayerObj(layerID);}
  58. if (bw.ns) {winY = window.pageYOffset;}
  59. else if (bw.ie) {winY = document.body.scrollTop;}
  60. if (bw.ie||bw.ns) {
  61. if (winY!=lastY&&winY>YOffset-staticYOffset){smooth = .3 * (winY - lastY - YOffset + staticYOffset);}
  62. else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset){smooth = .3 * (winY - lastY - (YOffset-(YOffset-winY)));}
  63. else{smooth=0}
  64. if(smooth > 0) {smooth = Math.ceil(smooth);}
  65. else{smooth = Math.floor(smooth);}
  66. if (bw.ie){mySticky.css.pixelTop+=smooth;}
  67. else if (bw.ns){mySticky.css.top=parseInt(mySticky.css.top)+smooth;}
  68. lastY = lastY+smooth;
  69. top.window.status=new Date()
  70. setTimeout('layerSlide("'+layerID+'")', refreshMS)}}}
  71. // -------------------------
  72. // Netscape 4.x browser resize fix
  73. function MM_reloadPage(init) {
  74. if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
  75. document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; top.onresize=MM_reloadPage; }}
  76. else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) {location.reload();}}
  77. // Create browser-independent layer and browser objects
  78. function makeLayerObj(eID){
  79. if(document.getElementById){this.css=document.getElementById(eID).style}
  80. else if(document.layers){this.css=document.layers[eID];}
  81. else if(document.all){this.css=document.all[eID].style;}
  82. return this
  83. }
  84. function checkBrowser(){
  85. this.ver=navigator.appVersion;
  86. this.name=navigator.appName;
  87. this.mac=(navigator.platform.toLowerCase().indexOf('mac')>-1)?true:false;
  88. this.opera=(navigator.userAgent.toLowerCase().indexOf('opera')>-1)?true:false;
  89. this.dom=document.getElementById?true:false;
  90. this.ns=(this.name=='Netscape');
  91. this.ie4=(document.all && !this.dom)?true:false;
  92. this.ie=(this.name =='Microsoft Internet Explorer'&&!this.opera)?true:false;
  93. this.ie5=(this.ie && (navigator.userAgent.indexOf("MSIE 5")!=-1))?true:false;
  94. this.macie50=(this.mac&&this.ie5&&(navigator.userAgent.indexOf("MSIE 5.0")!=-1))?true:false
  95. this.ns4=(this.ns && parseInt(this.ver) == 4)?true:false;
  96. this.ns6=((this.name=="Netscape")&&(parseInt(this.ver)==5))?true:false
  97. this.standards=document.getElementById?true:false;
  98. this.dhtml=this.standards||this.ie4||this.ns4;
  99. }
  100. function showMe(eID){
  101. myFloater=new makeLayerObj(eID)
  102. myFloater.css.visibility="visible";
  103. }
  104. function hideMe(eID){
  105. myFloater=new makeLayerObj(eID)
  106. myFloater.css.visibility="hidden";
  107. }