Risolto: onscroll aggiungi classe jquery

ui.widget.ScrollTo

Il problema principale con l'utilizzo del widget ScrollTo è che può essere difficile controllare dove si sposterà il cursore dell'utente quando fa clic sul widget. Ciò può rendere difficile la creazione di un'interfaccia utente facile da usare.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    //>=, not <=
    if (scroll >= 100) {
        //clearHeader, not clearheader - caps H
        $("#header").addClass("scrolled");
    } else {
        $("#header").removeClass("scrolled");  
    }  }); //missing );

Questo codice è scritto in jQuery e viene utilizzato per modificare la classe CSS di un elemento quando l'utente scorre la pagina.

La prima riga crea una funzione che verrà eseguita quando l'utente scorre. La seconda riga memorizza il valore di quanto l'utente ha fatto scorrere la pagina in una variabile chiamata 'scroll'. La terza riga dice che se il valore di 'scroll' è maggiore o uguale a 100, allora la classe CSS dell'elemento con un id di 'header' dovrebbe essere cambiata in 'scrolled'. In caso contrario, dovrebbe essere riportato alla sua classe originale.

Importare

jQuery fornisce un modo conveniente per importare altri file JavaScript nel tuo progetto. Per fare ciò, utilizzare la funzione jQuery import(). Ad esempio, per importare il file myfile.js nel tuo progetto, dovresti utilizzare il seguente codice:

import { mioFile } da './miofile.js';

Ciò includerà automaticamente myfile.js nell'ambito del progetto corrente e lo renderà disponibile per l'uso nel codice.

Strumenti di sviluppo

Esistono numerosi strumenti per sviluppatori disponibili in jQuery. Questi strumenti possono essere utilizzati per eseguire il debug del codice, ispezionare e modificare gli elementi DOM e altro ancora.

Related posts:

Lascia un tuo commento