class scroll{
    constructor(props){
        this.attach_top = props.attach_top;
        this.top = props.top;
        this.left = props.left;
        this.$el = props.el;
        this.recover_el_view = props.recover_el_view;
        this.unattach_top = undefined;
        this.$unnatach_bottom_el = props.$unnatach_bottom_el;
        this.attached = false;
        this.attached_by_bottom_el = false;
        this.ghost_block = props.ghost_block;
        this.$ghost_block = null;
    }

    attachElementWhenScroll(){
        if (!this.attached_by_bottom_el && this.$unnatach_bottom_el && this.$unnatach_bottom_el.getBoundingClientRect().top <= window.innerHeight && this.attached){
            let $unnatach_bottom_el_margin_top= window.getComputedStyle(this.$unnatach_bottom_el)
            $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.getPropertyValue('margin-top');
            $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.split('p')
            $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.length > 0? $unnatach_bottom_el_margin_top[0] : 0;
            this.$el.style.top = (window.scrollY - $unnatach_bottom_el_margin_top) + this.top + 'px';
            this.$el.style.position = "absolute";
            this.attached_by_bottom_el = true;
            return;
        } else if (this.attached_by_bottom_el && this.$unnatach_bottom_el && this.$unnatach_bottom_el.getBoundingClientRect().top >= window.innerHeight) {
            this.attachFunc(false)
        }
        if (!this.attached && this.$el.getBoundingClientRect().top <= this.attach_top) {
            this.attachFunc()
        } else if ((this.$el.parentElement.getBoundingClientRect().top - this.attach_top) > 0){
            this.$el.style.position = "unset";
            this.attached = false;
            if (this.$ghost_block) this.$ghost_block.style.display = "none";
        }
    }

    attachFunc(set_unattach=true){
        this.$el.style.top = this.top + 'px';
        this.$el.style.position = "fixed";
        this.attached = true;
        this.attached_by_bottom_el = false;
        if (this.$ghost_block) this.$ghost_block.style.display = "block";
    }

    init(){
        if (this.recover_el_view){
            $(this.$el).css({
                height: this.$el.offsetHeight,
                width: this.$el.offsetWidth
            })
        }
        if (this.ghost_block){
            let _ghost_block = `<div class="ghost_block" data-name="${this.ghost_block.name}" style="display: none;"></div>`

            $(_ghost_block).insertAfter($(this.$el));

            this.$ghost_block = $(`.ghost_block[data-name="${this.ghost_block.name}"]`)[0];

            this.$ghost_block.width = this.$el.offsetWidth;
            this.$ghost_block.height = this.$el.offsetHeight;
        }
    }

}