Conditional Scrolling Banner with YUI

2010-09-01 13:15 UTC
CSS JavaScript YUI

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 pre-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.

Comments