问题描述
我已经在我的主页上设置了Intersection Observer API。我有从导航菜单链接到ID的部分。单击每个部分后,每个部分都会成功触发Intersection Observer回调。
我从导航菜单中的其他页面链接到这些相同的部分,但是,当单击这些链接之一时,会将主页上的部分导航到,但是不会执行“路口观察者”回调。
以下是导航链接的示例:index.html#about-us
路口观察员代码:
var aboutUs = document.querySelector('#about-us');
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting === true) {
entries[0].target.style.opacity = '1';
}
},{ threshold: [0.5] });
observer.observe(aboutUs);
如果有人对此有任何经验,请告诉我。
解决方法
我找到了解决方案。检查条件中的window.scrollY
位置,然后对该部分执行代码:
if (window.scrollY > 1700 && window.scrollY < 1800) {
for (let i = 0; i < serviceDivs.length; i++) {
var el = serviceDivs[i];
el.style.opacity = '1';
}
}