I want something like this on this page: http://www.onlinegamesguru.com It's using this code. http://www.onlinegamesguru.com/js/float.js However, my sidebar is longer than the page, so instead of moving down when the top of the sidebar is covered by the page going down, I want the sidebar to move down when the bottom of it is not at the bottom of the page. I hope that makes sense.
Same as saying that the sidebar's bottom to follow page's bottom? But since your sidebar's height is longer than page's height, then your sidebar's top will be hidden for ever....
you can do that easily without any bother via position: fixed; on the element here's a way of doing it so its compatible with IE6 also: http://ryanfait.com/position-fixed-ie6/layout.css no js required. to do the smooth catchup things get slightly more interesting, let me know though - its easy, i do this on my blog http://fragged.org/ - right side adverts, but w/o the position: fixed and no animation, although I can add one.
Hey, thanks for the reply. I have tried both of these methods before, but there is a problem. My sidebar is longer than the page, so instead of it moving when the top disappears, I want the bottom of the ad to stick to the bottom of the page after the top is obscured
Hi again, I was trying to mimic your www.onlinegamesguru.com/js/float.js for bottom aligned bar. It's working in FF, Opera, Chrome & Safari though not quite well; worst case is in IE . In this page script there are 3 divs, one created by js (animated), the content page div, and css created div (static, just for reference). The css div is always bottom aligned, while the js div always to trying to align itself with the css div. So I guess there are still 2 problems : 1) wrong animation algorithm. 2) cross browser compatibility. 3) any idea? Hopefully forum guys or you could refine it, <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>css or js way?</title> <style type="text/css"> #cssbar{ position: fixed; height: 20em; width: 10em; right: 2em; bottom: 0em; padding: 1em; border: 1px dashed black; color: red; } #jsbar{ position: absolute; height: 20em; /*must be declared!!*/ width: 10em; right: 2em; bottom: 0em; padding: 1em; background-color: green; border: 1px solid blue; color: blue; opacity: 0.75; } #page{ width: 40em; margin: 1em auto; padding: 1em; border: 1px solid black; opacity: 0.5; } </style> <script type="text/javascript"> var tmSec=33; // in milliseconds per frame. good movie rate -> 30 frames per sec ~ 1000/30 msec per frame. tId=null; // timer ID. oldpYO=0; newpYO=window.pageYOffset; oldiH=0; newiH=window.innerHeight; oldoT=0; newoT=0; // target bar offsetTop due to scroll event. function movebarf(){ //ticking, changing oldoT -> newoT. var a=document.getElementById("jsbar"); if (Math.abs(newoT-oldoT)<5){ // compromize stopping region, rather than just newoT==oldoT ? clearInterval(tId); } else{ oldoT+=Math.round(0.5*(newoT-oldoT)); a.style.top=oldoT+"px"; // don't forget the px !! if (a.style.color=="blue"){ // just animates a.style.color="black"; } else{ a.style.color="blue"; } } } function onscrollf(){ oldpYO=newpYO; newpYO=window.pageYOffset; // newpYO=document.documentElement.scrollTop; oldoT=document.getElementById("jsbar").offsetTop; newoT=oldoT+newpYO-oldpYO; if (tId==null){ clearInterval(tId); } tId=setInterval("movebarf()",tmSec); } function onresizef(){ oldiH=newiH; newiH=window.innerHeight; // newiH = document.documentElement.clientHeight; oldoT=document.getElementById("jsbar").offsetTop; newoT=oldoT+newiH-oldiH; if (tId==null){ clearInterval(tId); } tId=setInterval("movebarf()",tmSec); } function onloadf(){ window.addEventListener("scroll", onscrollf, false); // why not document.addEventListener() ? window.addEventListener("resize", onresizef, false); // since this line cant do using document. } function onunloadf(){ window.removeEventListener("resize", onscrollf, false); //cleaning window.removeEventListener("scroll", onresizef, false); } </script> </head> <body onLoad="onloadf();" onUnload="onunloadf();"> <div id="cssbar"> <h1>BAR CSS</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> </div> <div id="page"> <h1>PAGE CONTENT</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> </div> <div id="jsbar"> <h1>BAR JS</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> </div> </body> </html> PHP:
Wait... I have misunderstood you all this time, and question myself how a visitor could see your top to bottom of page and the whole length of sidebar? So it must be arranged that a guest shall see the top of your page and your top of sidebar at the same time. And (like you said over and over ) he shall also see the bottom of your page and your sidebar bottom at the other same time. In short, when a guest scrolls down your page, he actually would trigger a "sidebar scroll down" too, but with faster speed... Am I correct this time? Haa, your example has mislead my mind. If yes, then truly this could not be done w/o javascript help. I have seen a kind of this a couple of years back, no need for javascript timer, but forgotten where. I'll try to rewrite the script then...
So, here it is... attached. It's very basic and not compatible w/ IE though, but works well in FF, Opera, Chrome, & Safari. And also no timer for fancy animation. Fell free to edit, use etc.