Use Javascript para desplazarse por una clase

Un usuario preguntó 👇

Hola.

Lo siento si escribo algo incorrecto o estúpido, pero no soy un experto y solo quiero jugar con Javascript.

Tengo un sitio web que usa el tema UnderStrap. Quiero agregar una clase .scuro (que significa oscuro en italiano) a la barra de navegación en el desplazamiento, solo en la página de inicio.

Después de leer algunos tutoriales en la web, intenté agregar esto a functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'cambia_classe_nav' ); function cambia_classe_nav(){
  if(is_front_page()){
    wp_enqueue_script( 'menu-scroll', get_stylesheet_directory_uri() . '/wp-content/themes/understrap-child-master/js/menu-scroll.js', array( 'jquery' ) )// }
  }
}
?>

A continuación, creé un archivo menu-scroll.js como este:

$(function() {
    var header = $(".navbar");

    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 50) {
            header.addClass("scuro");
        } else {
            header.removeClass("scuro");
        }
    });
});

Finalmente, intenté cambiar el color de fondo .scuro, pero no pasa nada. Traté de poner el Javascript directamente en la sección , pero todavía no pasa nada.

¿Alguien puede explicarme qué estoy haciendo mal?

¡Gracias por adelantado!

(@ alegremente)

Hace 10 meses, 1 semana

Debe eliminar esta sección de la ruta de su secuencia de comandos: /wp-content/themes/understrap-child-master ya que lo proporciona la función get_stylesheet_directory_uri.

(@mlchaves)

Hace 10 meses, 1 semana

Hola @ mariograsso87,

Solo un FYI, haz menu-scroll.js fuente de apariencia jQuery dom. No hay addClass() una función que conozco en JS vainilla. Asegúrese de que se carguen las bibliotecas jQuery correctas si decide usar este código.

Además, cuando cargue su página, asegúrese de que la consola de Dev Tools esté visible para que pueda estar atento a los errores.

¡Buena suerte!

(@ mariograsso87)

Hace 10 meses, 1 semana

@mlchaves, no tengo idea de cómo agregar bibliotecas jQuery … ¿Podría decirme si mi objetivo se puede lograr usando JS JS?

(@mlchaves)

Hace 10 meses, 1 semana

Hola @ mariograsso87,

Debo decir que, si no conoce la diferencia entre JavaScript y jQuery (y PHP para el caso), le recomiendo que lea sobre estas tecnologías antes de colocar cualquier código en su sitio. Solo mi humilde opinión.

Para responder tu pregunta. Si. Todo es posible.

Aquí está CodePen que escribí para alguien que quiera algo similar. Consideración: Debe dominar HTML, CSS y JavaScript para comprender qué está haciendo el código y cómo aplicarlo correctamente en un sitio de WordPress.

https://codepen.io/marklchaves/pen/RwNOVzQ

¡Feliz codificación! 😉

(@ alegremente)

Hace 10 meses, 1 semana

@ mariograsso87 No se preocupe, tiene la sintaxis correcta para cargar jQuery ya que lo enumeró como una dependencia. Sin embargo, jQuery en WordPress se carga en modo sin conflicto, porque hay otras bibliotecas que usan el $ para el acceso principal. Entonces deberías ejecutar jQuery como parámetro $.

(function($) {
...
} )(jQuery);

(@ mariograsso87)

Hace 10 meses, 1 semana

Primero que nada, gracias a todos. Como les dije antes, no soy un experto, aprendí algo de HTML y CSS por mi cuenta, y solo quiero jugar con Javascript.

Siguiendo tus consejos, resolví el problema de la siguiente manera.

Agregué esto a funtions.php:

<?php
//aggiungere funzione cambia_classe_nav
 add_action( 'wp_enqueue_scripts', 'cambia_classe_nav' );
 function cambia_classe_nav(){
 	if(is_front_page()){
   wp_enqueue_script( 'menu-scroll', get_stylesheet_directory_uri() . '/js/menu-scroll.js', array() );
 }
 }
?>

Creé un menu-scroll.js como este:

var lastScrollTop = 0;

window.addEventListener(
  "scroll",
  function() {
    var st = window.pageYOffset || document.documentElement.scrollTop;

    if (st > lastScrollTop) {
      
      document.getElementById("navigazione").classList.add("scuro");
    } else {
      
      document.getElementById("navigazione").classList.remove("scuro");
    }
    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
  },
  false
);

Y después de todo…. simplemente funciona!

Gracias nuevamente por tu gran ayuda.

Esta respuesta fue modificada hace 10 meses, hace una semana por.

(@mlchaves)

Hace 10 meses, 1 semana

@ mariograsso87,

¡Cinco altos! Gran trabajo. Gracias por compartir su solución con todos.

Disfruta 😉

¿Solucionó tu problema??

SíNo

0 / 0