Inserire JavaScript per aggiungere class navbar con scroll

milazzo87

Inserire JavaScript per aggiungere class navbar con scroll

Buonasera,

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

Ho un sito Wordpress, utilizzo il tema UnderStrap.

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!

milazzo87

Ho risolto seguendo le indicazioni arrivatemi sul forum internazionale di Wordpress.org.

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.