我有一個帶有 id 的目錄，#TableOfContents其中每個都href指向一個 h2 或 h3。
我遇到的問題是，一旦交叉點觀察者觀察到標題、h2 或 h3，則通過在中添加該鏈接的類來突出顯示該條目，但只要標題后的長內容（例如段落）進入viewport 該部分的突出顯示被洗掉，因為標題不在視口中。side-active#TableOfContentsp
這是一個問題，因為我希望部分 (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);
});
});
在視口中標題時突出顯示文本
一旦標題不在視口中，文本不會突出顯示
uj5u.com熱心網友回復：
所以問題是我們需要通過以下方式計算 containerBottom：
添加當前容器的頂部 下一個容器的頂部
或者如果它是最后一個容器，
當前容器的頂部 它是 outerHeight()
一旦那個；如果第 i 個容器處于滾動位置，則向其添加類并從第 i 個容器之前的所有容器中洗掉類（第 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）保持突出顯示，即使標題不在視口中，直到下一個子標題（“點到線的距離”）進入視野。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441723.html
標籤：javascript dom 引导程序 5 目录 交叉观察者
上一篇：在Javascript中，有沒有一種方法可以復制HTML包裝器而不使其“事件偵聽器”失去其功能？
下一篇：自定義屬性值Javascript