rohow
36 行
838 B
TypeScript
36 行
838 B
TypeScript
export const headerDividing = () => ({
|
|
isSticky: false,
|
|
$el: null as HTMLElement | null,
|
|
_observer: null as IntersectionObserver | null,
|
|
|
|
init() {
|
|
const centerEl = this.$el as HTMLElement;
|
|
if (!centerEl) return;
|
|
|
|
const header = centerEl.closest('.header') as HTMLElement;
|
|
|
|
if (!header) return;
|
|
|
|
// 直接观察 header 元素本身
|
|
this._observer = new IntersectionObserver(
|
|
(entries) => {
|
|
const entry = entries[0];
|
|
this.isSticky = entry.boundingClientRect.top < 0 && !entry.isIntersecting;
|
|
},
|
|
{
|
|
threshold: 0, // 只要有任何部分离开就触发
|
|
rootMargin: '0px' // 无偏移
|
|
}
|
|
);
|
|
|
|
this._observer.observe(header);
|
|
},
|
|
|
|
destroy() {
|
|
if (this._observer) {
|
|
this._observer.disconnect();
|
|
this._observer = null;
|
|
}
|
|
}
|
|
});
|