stickyElement

const Default = {
    backdrop: true,
}

export class stickyScrollElement {

    /**
    * Constructs a new parallax instance.
    *
    * @param container Where parallax applies to.
    */

    constructor(CSSSelector, config) {
        this.selector = CSSSelector;
        alert('test');
        //Auto-init once the DOM is ready
        if (document.readyState !== 'loading') {
            this.reset.bind(this);
        } else {
        
            document.addEventListener('load', this.reset.bind(this));
        }

        // Then update on every resize
        // window.addEventListener('resize', () => this.update());
        // this._config = this._getConfig(config)
    }


    // Private

    _getConfig(config) {
        config = {
            ...Default
        }
        return config
    }



    /**
   * Find elements
   * @return {void}
   */
    findElements() {
        this.els = document.querySelector(this.selector);
        console.log( 'coucou' ); 
    }

    /**
   * Reset Find any elements
   * @return {void}
   */
    reset() {
        this.findElements();
        this.toggle();    
    }

    toggle() {
        console.log( 'coucou' ); 
        const stickyElement = this.els;
        const header = document.querySelector('.fixed-header');
        const stickyElementHeight = stickyElement.offsetHeight;
        const elementOffsetTop = stickyElement.getBoundingClientRect().top + document.documentElement.scrollTop;

      

        const elementOffsetLeft = stickyElement.getBoundingClientRect().x;
        const margeSticky = header.offsetHeight + 50;
        const limitWrapper = document.querySelector('.content-side-left');
        const limitWrapperHeight = limitWrapper.getBoundingClientRect().height;
        const wrapperBottom = limitWrapper.getBoundingClientRect().top + limitWrapperHeight + document.documentElement.scrollTop;
    
        window.addEventListener('scroll', function () {
    
            if (window.scrollY >= ( wrapperBottom - stickyElementHeight  - margeSticky ) ) {
                // arrivé tout en bas
                console.log( "1" );
                stickyElement.style.position = 'absolute';
                stickyElement.style.bottom = 0 + 'px';
                stickyElement.style.top = 'inherit';
                stickyElement.style.left = 0 + 'px';
            } else if(  window.scrollY > elementOffsetTop - margeSticky ) {
                // element en sticky 
                console.log( "2" );
                stickyElement.style.position = 'fixed';
                stickyElement.style.top = margeSticky + 'px';
                stickyElement.style.left = elementOffsetLeft + 'px';
            }else{
                // element position initial 
                console.log( "3" );
                stickyElement.style.position = 'relative';
                stickyElement.style.top = 'inherit';
                stickyElement.style.bottom = 'inherit';
                stickyElement.style.left = 'inherit';
            }
    
        });
    }
}