Me gustaría agregar una clase a un elemento después de estar a X píxeles de la parte superior de la página y eliminar esa clase si te acercas a la parte superior. Para eso creé el siguiente código

 document.getElementsByTagName("body")[0].onscroll = function() { function offset(el) { var rect = el.getBoundingClientRect(), scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, scrollTop = window.pageYOffset || document.documentElement.scrollTop; return { top: rect.top + scrollTop, left: rect.left + scrollLeft } } var filter = document.querySelector('.filter-component.navbar'); var divOffset = offset(filter); console.log(divOffset.left, divOffset.top); var hereitsfixed = divOffset.top + 55; if (this.scrollTop >= hereitsfixed) { filter.classList.add("lol"); } else { filter.classList.remove("lol"); } };

Entonces, primero estoy tratando de averiguar qué tan lejos está el elemento de la parte superior (porque eso podría cambiar) y agregar 55 píxeles a eso. Obtengo el número correcto aquí. Y luego, cuando se desplaza hacia abajo y ese número está lejos de la parte superior o más, debe agregar la clase o eliminarla. Pero aquí no pasa nada. Ni siquiera un mensaje de error. Solo obtengo el número de console.log (que está bien, lo elimino más tarde).

¿Qué estoy haciendo mal aquí? No puedo entenderlo.