I hope that you're not having trouble googling reactjs event listeners. You may need to adapt this slightly for react but should still work.
One thing I tend to do if I'm sure of something with javascript is just test it in the chrome dev console. Work at it there until you get it right, then adapt the solution in your actual code once you've got it.
window.addEventListener('scroll', _debounce(() =>{// lodash debounce method.let supportPageOffset = window.pageXOffset !== undefined;
let isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');
let scroll = {
x: supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft,
y: supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop
};
if(scroll.y > 3000){ // 3000px (arbitrary - put whatever point you need there.)let element = element; // target element to change attribute
element.setAttribute('class', insertNewClass);//change the attribute.
}
}, 300));//ms
Only remember to update the state, not the dom elements themselves. And any new addListener should be on componentDidMount, and you would make yourself a favor if you would removeListeners on componentWillUnmount ...
TheSheriff
Co-Founder, Founder, Entrepreneur & Problem Solver
I hope that you're not having trouble googling reactjs event listeners. You may need to adapt this slightly for react but should still work.
One thing I tend to do if I'm sure of something with javascript is just test it in the chrome dev console. Work at it there until you get it right, then adapt the solution in your actual code once you've got it.
window.addEventListener('scroll', _debounce(() =>{// lodash debounce method. let supportPageOffset = window.pageXOffset !== undefined; let isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat'); let scroll = { x: supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft, y: supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop }; if(scroll.y > 3000){ // 3000px (arbitrary - put whatever point you need there.) let element = element; // target element to change attribute element.setAttribute('class', insertNewClass);//change the attribute. } }, 300));//ms