0
104
VistasLa clase de alternancia de jQuery se llama con demasiada frecuencia en el desplazamiento
Estoy tratando de agregar una clase a mi contenedor fijo una vez que el usuario desplaza la página más allá de 100 px, pero se está retrasando y alternando la clase incontrolable.
$(function () { $nav = $(".topmenu-container"); $(document).scroll(function () { if ($(this).scrollTop() >= 100) { $nav.addClass('scrolled'); } else { $nav.removeClass('scrolled'); } }); });Esto es lo que tengo hasta ahora... Tenía la misma función sin una cláusula if y la función toggleClass en su lugar, pero el mismo efecto allí.
Aquí ve el contenedor que se pega a la parte superior en el desplazamiento, y al que quiero agregar la clase una vez que el usuario se desplaza más allá de 100 px desde la parte superior, por ejemplo
Editar: ahora emito el valor scrollTop y vi que parece atascarse en el punto donde debería ocurrir la alternancia. Sigue saltando entre 156 px y 87 px, lo que hace que la alternancia suceda varias veces por segundo. ¿Alguien tiene alguna idea?
2 Respuestas
Responde la pregunta0
Lo que necesita es una limitación de velocidad para sus eventos de desplazamiento. En su caso, sugeriría throttling , lo que significa que sus eventos de desplazamiento están limitados a un cierto número por segundo o unidad de tiempo.
Otra opción es utilizar la eliminación de rebotes , pero esto provocaría que el evento se active solo una vez al final del desplazamiento, lo que podría no ser la mejor solución para su caso.
Lea más aquí: Diferencia entre limitar y eliminar el rebote de una función
Buena visualización: http://demo.nimius.net/debounce_throttle/
0
Dependiendo de su caso de uso, puede salirse con la suya con el nuevo valor fijo para la propiedad de posición en CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Además, en lugar de usar la eliminación de rebotes y la limitación, podría considerar usar la API de IntersectionObserver. Los eventos para InteresecciónObserver se activan solo una vez (dependiendo de la configuración) y seguramente menos que el desplazamiento, lo cual es un evento difícil de optimizar ya que se activa todo el tiempo. Consulte aquí: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Ahora, si tiene algunos elementos dentro del elemento que dependen de la clase, como... el logotipo que tiene una animación de escala o algo así, definitivamente tendrá que usar IntersectionObserver. Parece que su umbral es de 100 píxeles, definitivamente puede configurar Interesction Observer para hacer eso.
También puede echar un vistazo a este ejemplo de Wes Bos que parece estar en una de sus clases gratuitas: https://wesbos.com/javascript/06-serious-practice-exercises/scroll-events-and-intersection-observer
Espero que pueda probar estas soluciones en lugar del rollo anticuado.