I'm trying to get a class to appear on an element based on another elements position. So, basically, when the first element appears it has an attribute of data-anchor="position", and the element it's supposed to effect has an attribute of data-anchor="item". As data-anchor="position" enters the view window, it's supposed to add a class, and when it leaves it's supposed to remove the class. The position/item part finds the first one, and then just flickers the class name on and off. There's another part of the script that looks for an attribute of data-animate, and adds a class when that element comes into view. This part works fine, but I included it in case there's a conflict. I setup a fiddle to show this. Any guidance is greatly appreciated.
// Loop to add class on items with data-position attribute
var anchor = window.requestAnimationFrame ||
// IE Fallback
function(callback){ window.setTimeout(callback, 1000/60)};
var anchorToShow = document.querySelectorAll('[data-anchor="position"]');
function anchorloop() {
anchorToShow.forEach(function (anchorPos) {
if (isElementInViewport(anchorPos)) {
document.querySelector('[data-anchor="item"]').classList.add('fixed-object');
} else {
document.querySelector('[data-anchor="item"]').classList.remove('fixed-object');
}
});
anchor(anchorloop);
}
anchorloop();