stickiElement.js

/*

    CSS:
    .stick {
        position: fixed;
        margin: 30px 0 0 0;
        top: 0;
    }

    .stick-bottom {
        position: absolute;
    }

*/



function stickiElement ( _element, _limit ) {
    
    var el = _element,
        elementClassName = el.className,
        elementTop = el.getBoundingClientRect().top - 30,
        elementHeight = el.getBoundingClientRect().height,
        limit = _limit,
        _body = document.documentElement || document.body.parentNode || document.body,
        hasOffset = window.pageYOffset !== undefined;

    window.addEventListener( 'scroll', function ( event ) {
        
        scrollTop = hasOffset ? window.pageYOffset : _body.scrollTop;

        if ( elementTop <= scrollTop ) {
            el.className = elementClassName + ' stick';
        } else {
            el.removeAttribute( 'style' );
            el.className = elementClassName;
        }

        if ( getElementPosition( limit ).y <= elementHeight + 60 ) {
            el.style.bottom = limit.offsetHeight + 30 + 'px';
            el.className = elementClassName + ' stick-bottom';
        }

        


    }, false );


    function getElementPosition ( el ) {
        
        var x = 0,
            y = 0;

        for ( var e = el; e != null; e = e.offsetParent ) {
            
            x += e.offsetLeft;
            y += e.offsetTop;


        }

        for ( var p = el.parentNode; p != null && p.nodeType == 1; p = p.parentNode ) {
            
            x -= p.scrollLeft;
            y -= p.scrollTop;
               
        }

        return { x:x, y:y };

    }

}