After spending almost as much time searching for something already built as it would have taken to build it, I did just that, I took matters into my own hands.
<!-- Static banners above conditional scrolling one -->
<div id="scrollBanner" class="scrollBanner">
<!-- Image and/or flash-banners -->
<img src="Banner.gif" alt="Banner" />
What we need to do is to find the element to scroll in the DOM and find it's initial Y-position. Then we add a listener to the
scroll-event and just flip the CSS-class of the element, depending if we've scrolled past it or not.
var scrollBanner = document.getElementById("scrollBanner");
// Initial banner Y-position
var bannerYPos = YAHOO.util.Dom.getY(scrollBanner);
var isBannerAboveScrollTop = (YAHOO.util.Dom.getDocumentScrollTop() > bannerYPos);
var oldClassName = isBannerAboveScrollTop ? "scrollBanner" : "scrollBanner_fixed";
var newClassName = isBannerAboveScrollTop ? "scrollBanner_fixed" : "scrollBanner";
YAHOO.util.Dom.replaceClass(scrollBanner, oldClassName, newClassName);
Just style your
scrollingBanner_fixed-class with a fixed position and the
width you want it to have. Adjust the
top-setting to set how high up on the screen the scrolling banner should be. You could also use
padding to make the scrolling-experience more smooth.
This code could of course also be used for good, to have some kind of toolbar that would scroll along on a page.