[Y M] 大佬,我想问下像你这个侧边目录跟随是怎么做的,有插件还是?下面是cv简化得来的,还是有bug
<code>
/**
侧边栏标题跟随
/
export function TitleFollow() {
const element = document.querySelectorAll\('h1, h2, h3, h4, h5, h6'\);
const observer = new IntersectionObserver\(SectionItem\);
element.forEach\( v => observer.observe\(v\) \);
}
function SectionItem (observedEls: Array<any>) {
observedEls.forEach\(\( v: any\) => {
const id = v.target.getAttribute\('id'\),
anchor = document.querySelector\(li\#${id}\);
// 获取所有 li
const li:any = document.querySelector\(li\#${id}\)?.parentElement?.children;
if \(!anchor\)
return false
if \(v.isIntersecting\) {
// 移除所有 li 的 active
// for\(var i = 0; i < li.length; i++\) {
// li\[i\].classList.remove\('active'\);
// }
// 添加类名
anchor.classList.add\('active'\);
} else {
// 移除类名
anchor.classList.remove\('active'\);
}
}\);
}
</code>
[Y M] 大佬,我想问下像你这个侧边目录跟随是怎么做的,有插件还是?下面是cv简化得来的,还是有bug
<code>
/**
侧边栏标题跟随
/
export function TitleFollow() {
const element = document.querySelectorAll\('h1, h2, h3, h4, h5, h6'\);
const observer = new IntersectionObserver\(SectionItem\);
element.forEach\( v => observer.observe\(v\) \);
}
function SectionItem (observedEls: Array<any>) {
observedEls.forEach\(\( v: any\) => {
const id = v.target.getAttribute\('id'\),
anchor = document.querySelector\(li\#${id}\);
// 获取所有 li
const li:any = document.querySelector\(li\#${id}\)?.parentElement?.children;
if \(!anchor\)
return false
if \(v.isIntersecting\) {
// 移除所有 li 的 active
// for\(var i = 0; i < li.length; i++\) {
// li\[i\].classList.remove\('active'\);
// }
// 添加类名
anchor.classList.add\('active'\);
} else {
// 移除类名
anchor.classList.remove\('active'\);
}
}\);
}
</code>@jiangtj