En Firefox – JavaScript – Foros de SitePoint, vaya al ancla rota y resalte el elemento del menú

Mi página de inicio tiene 7 puntos principales que son los primeros 7 elementos de mi menú. El último elemento del menú es “Reservaciones” es una página separada.

Después de mucho jugar con un conocimiento mínimo, tengo javascript que resalta el elemento de menú correcto cuando la página de inicio se mueve al punto de anclaje apropiado. Todo funciona bien en Chrome y Safari. También funciona bien para el menú móvil, al menos en iPhone en Safari. (blanco apagado, rojo encendido)

Esto no funciona en Firefox. El desplazamiento funciona bien. Todos los anclajes se muestran activos (rojos) en la página principal. ¿Alguna idea sobre lo que hace que Firefox sea único?
El sitio de prueba está aquí. https://hotelcasasadev.wpengine.com/
Aquí está mi código https://codepen.io/mgason/pen/MWBmBjm?editors=0010
Aquí hay un video del problema usando 3 navegadores https://www.veed.io/view/a2b10045-5b3f-4ebd-a2d0-5e6b4d16174e?panel=share

Parece funcionar en Firefox (aunque un poco lento). ¿Has borrado la memoria caché y has vuelto a intentarlo?

Curiosamente, he borrado el caché varias veces, tanto localmente como en mi host. No solo el caché de la página, sino todo el caché en WPEngine. También apagué mi computadora y la reinicié. También pruebo en una nueva ventana privada en cada navegador cada vez.
En términos de velocidad, sospecho que mi código pirateado no es muy bueno. Cualquier consejo sobre esto sería apreciada.

Ahora en Chrome, los elementos del menú son todos rojos (excepto las residencias), por lo que asumo que actualmente se encuentra en el sitio.

Cuando verifica cosas como el evento de desplazamiento y cambia el tamaño, causa latencia porque se verifica constantemente. Debe anular las rutinas para que solo realicen sus comprobaciones con menos frecuencia.

No estoy completamente seguro de si se suponía que debía cambiar el color del menú cuando alguien se desplazaba manualmente hacia abajo en la página, o si simplemente cambió el color del menú cuando hizo clic. Cambiar el color del menú al hacer clic sería fácil, ya que solo puede agregar una clase con js y usarla para resaltar el elemento del menú.

Detectar la posición durante el desplazamiento manual es un poco más complicado.

No necesita js para navegar a un elemento en estos días porque CSS puede hacer eso con comportamiento de desplazamiento…

Me disculpo en consecuencia. estaba intentando algo Eliminar el (documento) innecesario .ready pareció hacer que funcionara para mí en Firefox. También parece un poco más rápido.
Cambio el color del elemento del menú cuando el usuario se desplaza y hace clic en el elemento del menú. Cualquier sugerencia para mejorar este código es apreciada. ¿A qué te refieres con cancelar rutinas?
Noté otro pequeño error. Todos los elementos del menú ancla se deslizan hacia la derecha, pero si voy a la página de Reservas y luego vuelvo al elemento del menú ancla en la página principal, por ejemplo, Acerca de nosotros, se mueve a la sección derecha, pero se alinea con la parte superior de la pantalla. . Haz clic en otro enlace y estarás bien. Es la primera Chapa después de una página más.

Lo podrías encontrar útil.

En lugar de usar el desplazamiento, podría considerar usar observador de intersección en lugar de.

Creo que es el mismo problema si vas directamente a esta página.

https://hotelcasasadev.wpengine.com/#HomeContáctenos

Como no está navegando desde el menú, js no detecta la posición de desplazamiento.

Probablemente necesite algunos js para consultar la cadena de URL en la carga de la página y detectar si la URL tiene una identificación de fragmento y luego saltar a la sección correcta como antes. @rpg_digital probablemente sería un mejor consejo

Tenga en cuenta que no acepta este desafío. la demostración de arriba (use el modo de depuración para probar) y puede interactuar con el elemento correctamente porque el desplazamiento solo se maneja en css. (Por supuesto, aún necesita js para resaltar el elemento de navegación).

Gracias por esta información. Es mucho que dominar para un principiante, pero lo estoy aprendiendo. Probablemente volveré con más preguntas. Gracias de nuevo

Voy a empezar a jugar con él. Muchísimas gracias
No suelo hacer preguntas, pero recuerdo que hace 12 años respondiste una pregunta que todos decían que era imposible. Cómo tener una sola imagen distribuida sobre el fondo de múltiples menús desplegables.

Este fue un pequeño experimento que hice hace un tiempo. No estoy seguro si ayuda.