Как я могу оптимизировать эти повторяющиеся действия, если внутри есть селекторы запросов? ⇐ CSS

[Anonymous]

Мне нужно упростить эти строки кода реагирования, я вижу, что он немного повторяется, но я не знаю, есть ли способ улучшить это

Любая идея будет принята!!!
useEffect(() => {
document.addEventListener("scroll", () => {
// Prices
if(document.querySelector("#prices").getBoundingClientRect().top == 78){
document.querySelector(".pricesArr").style.opacity = 1
document.querySelector(".pricesArr").classList.add("pricesArrAnim")
}
else if(document.querySelector("#prices").getBoundingClientRect().top > 660){
document.querySelector(".pricesArr").style.opacity = 0
document.querySelector(".pricesArr").classList.remove("pricesArrAnim")
}
// Contact
if(document.querySelector("#contact").getBoundingClientRect().top == 78){
document.querySelector(".contact").style.opacity = 1
document.querySelector(".contact").classList.add("contactAnim")
}
else if(document.querySelector("#contact").getBoundingClientRect().top > 660){
document.querySelector(".contact").style.opacity = 0
document.querySelector(".contact").classList.remove("contactAnim")
}
// Moreinfo
if(document.querySelector("#moreinfo").getBoundingClientRect().top == 78){
document.querySelector(".moreinfo").style.opacity = 1
document.querySelector(".moreinfo").classList.add("moreinfoAnim")
}
else if(document.querySelector("#moreinfo").getBoundingClientRect().top > 660){
document.querySelector(".moreinfo").style.opacity = 0
document.querySelector(".moreinfo").classList.remove("moreinfoAnim")
}
})
})


Подробнее здесь: https://stackoverflow.com/questions/793 ... ors-inside