Scrollbar Annotation

A quick and dirty scrollbar annotation like in Path for iPhone.

by michaelhue

HTML

<div id="scrollbubble" class="annotation">Test</div>

<div style="height: 2000px">
    <p>Scroll<br />down<br />↓ ↓ ↓</p>
</div>

<script>
$('#scrollbubble')
    .annotateScrollbar(window, {sticky: false})
    .bind('update.annotateScrollbar', function(event, progress, distance) {
        $(this).text('Progress (' + Math.round(progress * 100) + '%)');
     })
;
</script>

CSS

body {
     font: 12px/1.5 Helvetica, sans-serif;   
}

p {
    margin-right: 30px;
    text-transform: uppercase;
    text-align: right;
    font-size: 70px;
    font-weight: bold;
    line-height: 1;
    color: rgb(200, 200, 200);
}

.annotation {
    /*display: none;*/
    position: fixed;
    top: 0;
    right: 20px;
    z-index: 500;
    padding: 3px 8px;
    background-color: #000;
    color: #FFF;
    border-radius: 3px;
}

.annotation:after {
    content: " ";
    position: absolute;
    top: 50%;
    right: -8px;
    height: 0;
    width: 0;
    margin-top: -4px;
    border: 4px solid transparent;
    border-left-color: #000;
}

JavaScript

(function($) {

    /*
        Scrollbar Annotation for jQuery
        Use any element for annotating the scrollbar with context sensitive
        information. Inspired by Path for iPhone (http://path.com).
    
        Usage:
    
            > $(annotation).annotateScrollbar([target][, options]);
    
        Parameters:
        
            target  - Object or selector which shall be annotated. Defaults to
                      window.
            options - Custom options.
    
        Options:
    
            offset - Number of pixels to offset the annotation.
            sticky - If `true` the annotation will always stick to the middle
                     of the scrollbar.
            margin - Number of pixels to use as a minimum margin when `sticky`
                     is false.
            hide   - Number of milliseconds after which the annotation will be
                     hidden when the user finished scrolling. If `0` or `false`
                     the annotation will always be visible.
            event  - The event(s) which will be used to update the annotation's
                     position.
    
        Events:

            update.annotateScrollbar - Triggered when the position of the
                annotation changes. Passes the current position (0-1.0) and
                distance of the scrollbar.
    
        About:

            Created by Michael Hüneburg
            http://michaelhue.com
    
    */
    $.fn.annotateScrollbar = function(target, options) {
        var defaults = {
            offset: 0,
            sticky: false,
            margin: 5,
            hide: 500,
            event: 'scroll'
        };
        options = $.extend(true, defaults, options);

        if (!target) {
            target = window;
        }

        return this.each(function() {
            var annotation = this,
                content = $(target).children().first(),
                timer = null;

            // If target is the window object, set...