[英]Add class to one div when another is in the viewport
I have a website using vertical scroll snap.我有一个使用垂直滚动快照的网站。 The website is divided into full width and height sections and I would like to style the navigation and other elements depending on which of these sections in in the viewport.
该网站分为全宽和全高部分,我想根据视口中的这些部分来设置导航和其他元素的样式。
I have tried a lot of answers I have found online without success.我尝试了很多在网上找到的答案,但都没有成功。 The closest I can get it to work is this:
我能让它工作的最接近的是:
var targets = document.querySelectorAll('section')
var obsOptions = {
root: null, // measure against the viewport
threshold: .5 // how much of the element should be visible before handler is triggered
}
let handler = (entries, opts) => {
entries.forEach(entry => {
if (entry.intersectionRatio > opts.thresholds[0]) {
document.body.classList.remove(...document.body.classList);
document.body.classList.add(entry.target.id + '-active');
}
})
}
targets.forEach(el => {
var observer = new IntersectionObserver(handler, obsOptions);
observer.observe(el);
})
This works well except it removes all the classes off the body and the WordPress theme adds its own which are necessary for it to function so I can't have that这很好用,除了它从主体中删除了所有类,并且 WordPress 主题将它自己添加到 function 中,所以我不能拥有它
If I remove the line about removing the classes - ALL the section ID's show as classes at the same time.如果我删除关于删除类的行 - 所有部分 ID 同时显示为类。
I thought the best way would be to not apply it to the body, but to a container that had no other classes - so I have wrapped everything in a container div with a class of我认为最好的方法是不将它应用于主体,而是应用于没有其他类的容器 - 所以我将所有内容包装在一个容器 div 中,其中包含 class
.full-page-container
I tried editing the code to this我尝试将代码编辑为此
var targets = document.querySelectorAll('section')
var obsOptions = {
root: null, // measure against the viewport
threshold: .5 // how much of the element should be visible before handler is triggered
}
let handler = (entries, opts) => {
entries.forEach(entry => {
if (entry.intersectionRatio > opts.thresholds[0]) {
document.full-page-container.classList.remove(...document.ful-page-container.classList);
document.full-page-container.classList.add(entry.target.id + '-active');
}
})
}
targets.forEach(el => {
var observer = new IntersectionObserver(handler, obsOptions);
observer.observe(el);
})
but it doesn't work.但它不起作用。
How does one apply this same effect to a div rather than the body如何将同样的效果应用到 div 而不是 body
Any help would be much appreciated任何帮助将非常感激
Here is a codepen I have put together这是我放在一起的代码笔
https://codepen.io/shereewalker/pen/bGaqqmy https://codepen.io/shereewalker/pen/bGaqqmy
In the remove you are spending the content of classList and I think therefore are removing all the classes.在删除中,您正在花费 classList 的内容,因此我认为正在删除所有类。
I would suggest filtering the classList for classes that contain -active
(The class you add) and then removing those.我建议过滤包含
-active
(您添加的 class)的类的 classList,然后删除它们。
var targets = document.querySelectorAll('section')
var obsOptions = {
root: null, // measure against the viewport
threshold: .5 // how much of the element should be visible before handler is triggered
}
let handler = (entries, opts) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > opts.thresholds[0]) {
const classesToRemove = findClassesWithActive(document.body.classList);
if (classesToRemove.length > 0) {
document.body.classList.remove(classesToRemove);
}
document.body.classList.add(entry.target.id + "-active");
}
});
};
targets.forEach(el => {
var observer = new IntersectionObserver(handler, obsOptions);
observer.observe(el);
})
function findClassesWithActive(classList) {
return classList.filter(c => c.includes('-active')
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.