iOS-like stretchy header

For https://news.layervault.com/stories/13207-ask-dn-mimic-ios-apps-stretchy-header-on-the-web

by mrmartineau

HTML

<div id="content">Try dragging me down</div>

CSS

body {
    margin: 0;
    padding: 0;
    background: purple url(http://farm9.staticflickr.com/8363/8344623421_3d3911f5bb_c.jpg) 50% -200px no-repeat;
}

#content {
    position: relative;
    top: 100px;
    height: 500px;
    background: #fff;
    padding: 20px;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

#content.ui-draggable-dragging {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

JavaScript

$(function(){
    $('#content').draggable({
        axis: 'y',
        scroll: false,
        drag: function(){
            var offset = $(this).position().top - 100
            var bkgpos = (offset / 2) - 200
            $('body').animate({
                'background-position-y': bkgpos
            }, 10)
        },
        stop: function(){
            $(this).animate({top: 100}, 200, 'easeOutExpo')
            $('body').animate({
                'background-position-y': -200
            }, 200, 'easeOutExpo')
        }
    })
})