Fixedbox.js - simulating fixed positioning with javascript
December 5, 2006 8:45 AM
The goal of the Fixedbox class is to enable elements to behave like they have 'fixed' positioning, without having to overcome any browser hurdles. If an element has fixed positioning, it is supposed to stay at the same spot in the browser window, even when the page is scrolled. This can be very useful in situations where you want a navigation box to always be visible, even when the user is scrolled to the bottom of a very long page. Take a look at the demo to see it in action, and view the javascript source here. A functional example of this class is the color selector box in the top right corner of this site.
Fixedboxes are created as follows:
new Fixedbox( 'fixedbox', { space: 6, duration: .4 } );
The red div will move up and down the page as it is scrolled, but will never go above its initial y offset. The smooth movement is achieved with the Effect.MoveBy function from the Scriptaculous library, and the positioning is calculated using Prototype. The 'space' option determines how much space to keep between the fixedbox and the top of the screen, which allows you to maintain any margin that you were applying to the element. The duration option is passed on to Effect.MoveBy and determines how many seconds it will take for the fixedbox to move from one position to the next.