当您向下滚动页面时,我试图突出显示粘性目录中的当前部分项目。
目前的结构是这样的:
<div>
<div>
<div>
<div>
<h2 id="twitter-chats-for-ecommerce">Header</h2>
<div>content...</div>
</div>
</div>
</div>
</div>
目录如下:
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#twitter-chats-for-ecommerce">Twitter Chats for Ecommerce</a></li>
</ul>
锚点通过 WordPress 中的古腾堡块(在本例中为 h2)自动应用于标头。
现有的 JavaScript 如下:
(function($) {
/* Table of contents - highlight active section on scroll */
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
if (entry.intersectionRatio > 0) {
document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
} else {
document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
}
});
});
// Track all sections that have an `id` applied
document.querySelectorAll('h2[id]').forEach((section) => {
observer.observe(section);
});
});
})( jQuery );
但正如您从下面的示例屏幕截图中看到的,当匹配的标题(在本例中为 h2)在页面上可见时,目录中的项目会突出显示。
因此,如果页面上有多个可见标题,则目录中会突出显示多个项目。
理想情况下,我猜它应该与该部分的 div 匹配,但 id 锚点被应用于标题,而我无法控制这一点。
有没有一种方法可以修改 JS 以某种方式只检测整个 div 部分而不仅仅是标题,这样它就只会在目录中突出显示一个项目 - 或者有比这更好的方法吗?
可以看到我想要实现的完美运行的示例here https://developer.atlassian.com/server/confluence/writing-a-confluence-theme/(请参阅右侧边栏中的“在此页面上”部分)。