我想让左侧导航显示当前可见部分。但是我的部分有不同的高度,我不知道如何正确跟踪它们。
如果每次调用我的回调函数都可以看到所有条目及其状态,但它会获取与阈值匹配的条目,那就更好了。
我可能错过了一些东西。应该有一种方法可以使这个工作。
这是我的 jsBin https://jsbin.com/homibef/edit?html,css,js,output
stickybits('#sticky', { stickyBitStickyOffset: 0 });
if (window.IntersectionObserver) {
const callback = function(entries) {
// Find all visible and then with biggest intersectionRatio
let currentNav = null;
const visibleEntries = entries.filter(entry => entry.isIntersecting);
if ( Array.isArray(visibleEntries) && visibleEntries.length > 0 ) {
currentNav = visibleEntries.reduce((prev, current) => {
return (prev.intersectionRatio > current.intersectionRatio) ? prev : current;
});
} else {
currentNav = visibleEntries;
}
if (currentNav.target) {
// Handle navigation change
const wasCurrent = document.querySelector('.navItem.isCurrent'); …Run Code Online (Sandbox Code Playgroud)