I was in need of a banner that would scroll along on the page, even when the user had scrolled passed it. After Googling with Bing for any done JavaScript to achieve this, I still only found plug-ins for different PHP-based CMS:es.
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.
In my case I solved it with Yahoo's YUI 2, but you can do it just as well in any other Javascript-library, like jQuery.
<!-- Static banners above conditional scrolling one -->
<div id="scrollBanner" class="scrollBanner">
<!-- Image and/or flash-banners -->
<img src="Banner.gif" alt="Banner" />
</div>
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);
YAHOO.util.Event.addListener(window, 'scroll',
function() {
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.
.scrollingBanner_fixed {
position: fixed;
top: 0px;
width: 100px;
}
This code could of course also be used for good, to have some kind of toolbar that would scroll along on a page.
