在自定义Nav组件上不带引导带的简单滚动间谍

Question

我有一个id #TableOfContents目录，其中每个href指向一个h2或h3。

我遇到的问题是，一旦交叉口观察者观察到标题、h2或h3，就会通过在#TableOfContents中为该链接添加类side-active来高亮显示该条目，但当标题后面的长内容(如p段落)进入视图时，该部分的突出显示将被删除，因为标题并不在视图中。

这是一个问题，因为我希望这个部分( h2，h3)仍然被高亮显示，直到下一个h2或h3不跨越一半的视图。

我能做什么?

window.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
    const id = entry.target.getAttribute('id');
      if (entry.intersectionRatio > 0) {
        document.querySelector(`#TableOfContents a[href="#${id}"]`).classList.add('side-active');
      } else {
        document.querySelector(`#TableOfContents a[href="#${id}"]`).classList.remove('side-active');
      }
    });
  });

  toc = document.querySelectorAll('#TableOfContents a');
    // get content so that link refer to it
  toc.forEach(function (link) {
    var id = link.getAttribute("href");
    var element = document.querySelector(id);
    observer.observe(element);
  });
});

视图中的标题突出显示文本。

​

​

当标题不在视图中时，不突出显示文本。

​

​

Answer 1

因此，我们需要通过以下方法计算containerBottom：

1. 添加当前容器的顶部+下一个容器的顶部

1. 或者如果它是最后一个容器，

当前容器的顶部+它的outerHeight()

一次；如果ith容器处于滚动位置，则向其添加类并从ith容器之前的所有容器中删除类(第18-21行)(反向循环)

$(function () {
  // Table of contents (`ul`) that contains `a` tag in `li` which we want to highlight  
  var sectionIds = $('#TableOfContents a'); 

    $(document).on('scroll', function(){
        sectionIds.each(function(i, e){
            var container = $(this).attr('href');
            var containerOffset = $(container).offset().top; // container's top
            var nextContainer = $(sectionIds[i+1]).attr('href')

            if (i != sectionIds.length-1) {
             // if this container isn't last container
              var containerHeight = $(nextContainer).offset().top;
            } else {
             // last container's height will be outerHeight
              var containerHeight = $(container).outerHeight();
            }
            var containerBottom = containerOffset + containerHeight;

            var scrollPosition = $(document).scrollTop();
            if(scrollPosition < containerBottom - 20 && scrollPosition >= containerOffset - 20){
              for (var j = i; j >= 0; j--) {
                $(sectionIds[j]).removeClass('active');
              }  
              $(sectionIds[i]).addClass('active');
            } else{
                $(sectionIds[i]).removeClass('active');
            }
        });
    });
});

检查突出显示的第一个标题(“行方程”h1)，即使标题在下一个子标题(“从一行的距离”)进入视图之前仍保持高亮显示。

​

​