I want to trigger the scroll event when the browser window is 75rem and greater and remove it when the window is smaller.
This only works but doesn't watch for window size change:
const mql = window.matchMedia("(min-width: 75rem)")
const thumb = document.querySelector(".entry-figure")
const rate = 0.5
if (mql.matches) {
document.addEventListener("scroll", () => {
thumb.style.opacity = (100 / window.scrollY) * rate
})
}
I tried the following, but it fails:
mql.addEventListener( "change", (e) => {
if (e.matches) {
document.addEventListener("scroll", () => {
thumb.style.opacity = (100 / window.scrollY) * rate
})
}
})