78 lines
3.1 KiB
JavaScript
78 lines
3.1 KiB
JavaScript
function attachElementWhenScroll(el, options){
|
|
let attach_top = options.attach_top;
|
|
let top = options.top;
|
|
let left = options.left;
|
|
|
|
if (el.getBoundingClientRect().top <= attach_top){
|
|
el.style.top = top + 'px';
|
|
el.style.position = "fixed";
|
|
} else if (el.getBoundingClientRect().top >= attach_top){
|
|
el.style.position = "unset";
|
|
}
|
|
}
|
|
|
|
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) + '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;
|
|
}
|
|
}
|
|
|
|
} |