Supporto » Funzionalità = Plugin » Inserire JavaScript per aggiungere class navbar con scroll

  • Risolto mariograsso87

    (@mariograsso87)


    Buonasera,

    perdonatemi se scrivo qualche castroneria, mi sto divertendo a fare qualche esperimento ma non sono un esperto.

    Utilizzo il tema UnderStrap.ì e vorrei fare in modo che, solo in homepage, allo scroll si aggiungesse una class .scuro alla navbar.

    Leggendo varie guide, ho provato ad aggiungere questo 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' ) )// }
      }
    }
    ?>

    E a creare il file menu-scroll.js così:

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

    Dopo di che, ho provato a dare alla classe .scuro un background diverso, tramite css, ma non succede niente.

    Ho provato anche ad inserire lo script direttamente nell’header, ma niente lo stesso. Non vedo neanche la classe ispezionando la navbar con la console di chrome o firefox.

    Mi sapreste dire dove sbaglio?

    Grazie in anticipo!

Stai visualizzando 1 risposte (di 1 totali)
  • Chi ha creato la discussione mariograsso87

    (@mariograsso87)

    Ho risolto seguendo le indicazioni arrivatemi sul forum internazionale.

    Pubblico qui sperando possa essere d’aiuto per qualcuno.

    Ho aggiunto questo 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() );
     }
     }
    ?>

    E ho creato un file menu-scroll.js così:

    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
    );

    Ora funziona tutto come dovrebbe.

Stai visualizzando 1 risposte (di 1 totali)
  • Il topic ‘Inserire JavaScript per aggiungere class navbar con scroll’ è chiuso a nuove risposte.