MinusMyThoughts Posted May 7, 2007 Share Posted May 7, 2007 Can anyone tell me how this page works? I have a rough idea, but JavaScript isn't really a strong point of mine, if this even functions using JS.Stellio LLCI'd love a tutorial, if one exists. Otherwise, a general idea of where to start would be awesome. Thanks!-Jason Link to comment Share on other sites More sharing options...
aspnetguy Posted May 7, 2007 Share Posted May 7, 2007 It isn't as complicated as oyu might think. It is just some CSS.The part of the site that is fixed (logo and links) is placed last in the XHTML in <div id="fixed"></div>then this CSS holds it in place #fixed {position:absolute;left:40px;top:55px;width:140px;height:200px; }body > div#fixed { position: fixed; } Link to comment Share on other sites More sharing options...
MinusMyThoughts Posted May 7, 2007 Author Share Posted May 7, 2007 I guess I should have been more clear; the part I'm trying to figure out is the scrolling. Try scrolling anywhere on the page and then click a button.That was what I meant. Sorry for the lack of description.-Jason Link to comment Share on other sites More sharing options...
jesh Posted May 8, 2007 Share Posted May 8, 2007 Hmm, that script looks pretty complicated. The idea, however, isn't all that complicated. If you want to click on a link and have the page scroll to the section rather than immediately jump to it, you'll want to follow steps similar to this:1) Get a reference to the element to which you want the page to scroll: var element = document.getElementById("section3"); 2) Get the position of that element relative to the page: var top = element.offsetTop; 3) Create a function that adds (or subtracts) a set number of pixels to the document.scrollTop property: var interval = 10;function scroll(direction){ document.scrollTop += interval * direction;} 4) Create a function that animates the whole thing that is activated when you click on the link/button: function animate(){ if(top < document.scrollTop) { scroll(-1); setTimeout("animate();", 100); } else if(top > document.scrollTop) { scroll(1); setTimeout("animate();", 100); } else // top = scrollTop { }} This will, of course, require some tweaking and fine tuning, but I hope it'll help you get started. Link to comment Share on other sites More sharing options...
MinusMyThoughts Posted May 8, 2007 Author Share Posted May 8, 2007 I've built something similar to this, I think, in Flash. Does JS support horizontal movement as well?Because that would be super...-Jason Link to comment Share on other sites More sharing options...
jesh Posted May 8, 2007 Share Posted May 8, 2007 Yeah, you can get the scroll position of the horizontal scroll bar by using the scrollLeft property rather than scrollTop. If you were to set the scrollLeft position in a setTimeout loop, you'd have horizontal scrolling. Link to comment Share on other sites More sharing options...
MinusMyThoughts Posted May 8, 2007 Author Share Posted May 8, 2007 Sweet!I don't know if I'll actually use that, because I've always hated side-scrolls, but it's nice to know. I guess I'll play with it and decide if it looks cool enough.Thanks!-Jason Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.