$.fn.scroll_with_page = function(opts) {

    opts = $.extend($.fn.scroll_with_page.opts, opts);

    // where does the container start + height of the container - (total amount of buffer) = where to stop
    var stop;
    if ( opts.container ) {
        opts.container = $(opts.container);
        stop = (opts.container.offset().top + opts.container.height()) - (opts.buffer.top + opts.buffer.bottom);
    }

    var orig_coord = parseInt($(this).css('top'));

    // based on our initial position and the desired buffer, when do we start to move the box?
    var threshold = parseInt($(this).offset().top - opts.buffer.top);

    // var scroll_callback;
    var self = this;
    $(window).scroll(function(e) {reposition();});

    function reposition() {
        // scrollTop tells us how many pixels we have scrolled down (if we have scrolled down 32 pixels, then there
        // are 32px above the fold and scrollTop() = 32). If our threshold is 100 and we have scrolled down 32, then
        // our delta is 68 (meaning we need to scroll down 68 more pixels before we start to mvoe the box)
        var delta = parseInt($(document).scrollTop() - threshold);

        if ( delta >= 0 ) {
            var new_offset = orig_coord + delta;
            if ( !stop || stop > $(document).scrollTop() ) $(self).css('top',  orig_coord + delta);
        }
    }
};

// Set defaults on the plugin function
$.fn.scroll_with_page.opts = {
    container : null,
    buffer : {
        top    : 20,
        bottom : 20
    }
};