Aggiunta e rimozione di classi a diverse altezze sulla pagina utilizzando jQuery

Question

Voglio rimuovere/aggiungere classi quando l'utente si trova a diverse distanze dall'alto usando jQuery.

L'ho eseguito correttamente, e funziona correttamente, ma penso di sbagliarmi, e vorrei il tuo aiuto per ottimizzare il codice.

L'html è semplice, in pratica le sezioni (compresa l'intestazione) hanno una larghezza del 100%. e diversi colori. Voglio che l'intestazione cambi colore quando è sopra la prima sezione (per scopi estetici). E voglio anche che abbia un'ombra quando la pagina è stata scorsa più di 1 pixel.

Lo sto aggiungendo/rimuovendo le classi.

Quando uso un ennesima istruzione if non funziona bene perché ogni volta che una qualsiasi condizione è soddisfatta, js smette di controllare le altre corrispondenze, quindi non applica tutte le classi necessarie.

Il prossimo codice funziona, tuttavia come ho detto, penso che non sia ottimale/scritto male. Ecco il markup HTML:

<header class="dark no-shadow"> 
    Header 
</header> 
<section class="blue"> 
    Please Scroll Down to see the header changes... 
</section> 
<section> 
    The header color Should change when you pass through me. 
</section> 

E qui è il codice jQuery: (! Come me)

var header = $('header'), 
     blueSection = $('section.blue'), 
    // Calculate when to change the color. 
     offset = blueSection.offset().top + blueSection.height() - header.height(); 

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

    // Remove Class "dark" after scrolling over the dark section 
    if (scroll >= offset) { 
    header.removeClass('dark'); 
    } else { 
    header.addClass('dark'); 
    } 

    // Remove Class "no-shadows" whenever not on the top of the page. 
    if (scroll >= 1) { 
    header.removeClass('no-shadow'); 
    } else { 
    header.addClass('no-shadow'); 
    } 

}); 

E per quelli di voi che amano utilizzare jsfiddle: https://jsfiddle.net/shock/wztdt077/6/

Grazie ragazzi!

Answer 1

Here è quello che è venuta in mente:

var header = $('header'), 
    blueSection = $('section.blue'), 
    // Calculate when to change the color. 
    offset = blueSection.offset().top + blueSection.height() - header.height(); 

var add = function(obj, cls) {obj.addClass(cls);} 
var remove = function(obj, cls) {obj.removeClass(cls);} 

var stylePoints = [offset, 1,   100, 200]; 
var styleTo =  ['dark', 'no-shadow', 'blue', 'tall']; 
var styleType = [add, add,   remove, remove]; 

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    for (i = 0; i < stylePoints.length; i++) { 
    var func = styleType[i]; 
    if (scroll >= stylePoints[i]) 
     (styleType[i] == add) ? remove(header, styleTo[i]) : add(header, styleTo[i]); 
    else func(header, styleTo[i]); 
    } 
}); 

Non è che molto più a lungo il vostro attuale jQuery, e permette di (teoricamente) un numero infinito di cambiamenti di stile senza dover aggiungere un milione di lunga se/else dichiarazioni. Per aggiungere una nuova modifica di stile, devi aggiungere un valore alla fine di ciascuno dei tre array. stylePoints specifica il valore scrollTop() in base al quale uno stile deve essere aggiunto o rimosso. styleTo specifica la classe da aggiungere o rimuovere. styleType specifica se questa classe deve essere aggiunta o rimossa quando l'utente scorre sopra il valore stylePoints corrispondente. L'opposto si verificherà quando l'utente scorre di seguito o al valore corrispondente al valore stylePoints corrispondente. Ad esempio, è possibile vedere dal codice che la classe tall sarà remove da header quando l'utente viene spostato al di sopra di 200 e aggiunto quando l'utente scorre a basso oppure 200.