Handles the header at webdevtrust.com

peekaboo.js

'use strict';
(function($){

let Peekaboo = {

    // PROPERTIES
    $window: null,
    $header: null,
    height: 0,
    curPos: 0,
    prevPos: 0,
    curDir: 'none',
    prevDir: 'none',

    // METHODS
    initiatlize () {

        this.$window = $( window );

        this.$window.resize( () => { this.handleResize() } );
        if ( ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch ) {
            // touch device
            $( document.body ).on('touchmove',  () => { this.handleScroll() } );
        } else {
            this.$window.scroll( () => { this.handleScroll() } );
        }

        this.$header = $( '#peekaboo' );
        this.updateHeight();

    },
    handleScroll () {

        this.curPos = this.$window.scrollTop();

        if( this.curPos > this.prevPos ){
            this.curDir = 'down';
            if( this.curPos > this.height ) {
                this.$header.css( 'background-color', $( document.body ).css('background-color').replace('rgb', 'rgba').replace(')', ', 0.9)') );
            }
        } else {
            this.curDir = 'up';
            if( this.curPos <= this.height ) {
                this.$header.css( 'background-color', 'transparent' );
            }
        }
        if( this.curDir !== this.prevDir ){
            this.toggleHeader( this.curDir, this.curPos );
        }

        this.prevPos = this.curPos;

    },
    toggleHeader ( dir, pos ) {

        if( dir === 'down' ) {
            this.$header.css( 'top', '-' + this.height + 'px' );
        } else {
            this.$header.css( 'top', '0px' );
        }

        this.prevDir = this.curDir;


    },
    handleResize () {
        this.updateHeight();
    },
    updateHeight () {
        this.height = this.$header.outerHeight();
    },
}

let Colorizer = {

    // PROPERTIES
    $window: null,
	  $panels: null,

    // METHODS
    initiatlize () {

        this.$window = $( window );
        this.$panels = $( '.panel' );
		
		this.$window.scroll( () => { this.handleScroll() } );

    },
    handleScroll () {
		let pos = this.$window.scrollTop() + (this.$window.height() / 3);
		
		this.$panels.each( function ( ) {

			let $panel = $( this );
			let $body = $( document.body );
			
			if ($panel.position().top <= pos && $panel.position().top + $panel.height() > pos) {
				
				$body.css( 'background-color', $panel.data( 'color' ) );
				$( 'peekaboo' ).css( 'background-color', $body.css('background-color').replace('rgb', 'rgba').replace(')', ', 0.9)') );

			}
		});
	}
}
// INITIALIZING OBJECTS WHEN DOM IS READY
$( document ).ready((e) => {

    Peekaboo.initiatlize();
    Colorizer.initiatlize();

});

})( jQuery );