A Pen by Sebastian Thomas.

index.haml

<!-- Flick the box within the page and it returns, give it a hard flick off the top of the page and it will stay there. Gives the user more tactile feeling. 'Top of page' depends on size of page! :) -->

.pep

script.js

        var threshold = 30;
        var REVERT_THRESHOLD = 150;
        var $box = $('.pep');
        var initialOffset = $box.offset();
        var shouldRevert = false;

        $box.pep({
            useCSSTranslation: false,
            axis: 'y',
            revert: true,
            revertAfter: 'ease',
            initiate: function(ev, obj) { 
              shouldRevert = false;
            },
            stop: function(ev, obj)     {
                var offset = this.$el.offset();
                var diffTop  = Math.abs( initialOffset.top - offset.top );

                if (diffTop < REVERT_THRESHOLD){
                  shouldRevert = true;
                }
            },
            revertIf: function(){
                return shouldRevert;
            }
        });

style.less

.pep{ 
    background: #ee874e; 
    width: 80px; 
    height: 80px; 
    position: absolute; 
    bottom: 40px; 
    left: 20px 
}

tmbau.markdown

tmbau

Flick the box within the page and it returns, give it a hard flick off the top of the page and it will stay there. Gives the user more tactile feeling.

A Pen by Sebastian Thomas on CodePen.

License.