Here’s a little smidge of JavaScript to emulate the positioning effect of the shopping cart in the Apple Store. If you’ve used that site before, you may have noticed that when you scroll your browser down, the cart changes position to stay in view. It starts out at some position relative to the top of the screen, but as you scroll the tall page downward, it seems to stick about 10px from the browser window top and stay there until you scroll back up to the top of the page. This is surprisingly easy to do with Prototype.js.
Make a new page, and put a bunch of tall content on it. Then draw a new HTML box somewhere else on the page. (I put mine near the same spot where the Apple cart lives; on the right, about 200px from the top. Make a note of the name of this box. You can fill it with a color, or put any content in it you like, just so you can see it.
Apply Protaculous to the page, choose prototype-packed as the library, and paste the following into the top Function Body editor:
var sticker = $('item1');
var origin = sticker.cumulativeOffset()['top'];
var offset = 10;
Event.observe(window,'scroll', function(evt){
var scrolled = document.viewport.getScrollOffsets()[1];
if(scrolled >= (origin - offset)){
if(Prototype.Browser.IE){
sticker.setStyle({"top":(scrolled + offset) + "px"});
}else{
sticker.setStyle('position:fixed; top:' + offset + 'px;');
}
}else{
sticker.setStyle('position:absolute; top:' + origin + 'px;');
}
});
Naturally, change ‘item1’ in this code to be the actual ID of your HTML box. Also, if you’re using the RPL Action on this page, be sure to apply the Remove from RPL Action to this box, or the effect will fail.
Preview, and scroll your page. You’ll see that the box you’ve set to be the “sticker” will never get any further than 10px from the top of the window, no matter how far you scroll. And when you scroll back down, it will return to its original spot on the page.
There’s a shim in here for IE, which doesn’t (except for IE 9, maybe 8 in Standards mode) support position:fixed. This shimmed effect will never be as smooth as the standards-compliant browsers, because it has to wait until the browser updates the JavaScript thread with the current window position, so there may be some visual stutter. The window will end up stuck in the right place, though.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options