REVEALER - BIZAMAJIG USAGE

by bizamajig

HTML

<div id="container">
    <div id="content">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT </div>
    <div id="bizamajig-cta" data-reveal_content_max_height="200">
        CALL TO ACTION
    </div>
</div>

CSS

#container {
    height: 2000px;
    background-color: red;
}
#content {
    height: 500px;
    border: 1px solid #000;
}
#bizamajig-cta {
    border: 1px solid #00f;
    height: 0px;
    background-color: #fff;
    color: #00f;
/*  max-height: 100px;*/
    overflow: hidden;
}

JavaScript

$(window).scroll( function() {
        var $element = $('#bizamajig-cta'),
            input__reveal_content_max_height = $element.data( 'reveal_content_max_height' ) || 0;

        $element.css({ 'max-height': input__reveal_content_max_height + 'px' });

        var input__scroll_top = $(this).scrollTop();

console.log( input__scroll_top );

		if( input__scroll_top > input__reveal_content_max_height ) {
console.log( 'input__scroll_top > max-height = ', input__reveal_content_max_height + 'px' );
		}
        
        $element.height( input__scroll_top );

        if( input__scroll_top == 0 ) {
            $element.hide();
console.log( 'HIDE' );
        } else {
            $element.show();
console.log( 'SHOW' );
        }

    }).scroll();