jQuery - Technik für Code in Scroll-Funktion zu reduzieren

Question

Ich habe oft Code wie folgt und ich denke, es gibt sicher eine Möglichkeit, es kürzer zu schreiben. Ich würde mich freuen, eine neue Technik zu lernen, wenn es eine gibt =)

bitte daran erinnern, es ist in einem auf Scroll-Funktion. Jeder Block ist für eine Ebene, die seitwärts gescrollt wird.

st: ist der actuel scrollTop() cat3: scrollTop des Inhalts vor dem 3 * wh in diesem Fall cat4: scrollTop des Inhalts vor + Breite cat3 CAT5: scrollTop des Inhalts vor + Breite von layer1 + Breite cat4 ...

var w3 = st - (3 * wh); 
if (w3 > 0) { 
    $('#cat3 .inside').css({ 
     "left" : -1 * w3 + "px", 
     "position" : "fixed" 
    }); 
} else if (w3 < 0){ 
    $('#cat3 .inside').css({ 
     "left" : "0", 
     "position" : "absolute" 
    }); 
} 

var w4 = st - (3 * wh + fh[3]); 
if (w4 > 0) { 
    $('#cat4 .inside').css({ 
     "left" : -1 * w4 + "px", 
     "position" : "fixed" 
    }); 
} else if (w4 < 0){ 
    $('#cat4 .inside').css({ 
     "left" : "0", 
     "position" : "absolute" 
    }); 
} 

var w5 = st - (3 * wh + fh[3] + fh[4]); 
if (w5 > 0) { 
    $('#cat5 .inside').css({ 
     "left" : -1 * w5 + "px", 
     "position" : "fixed" 
    }); 
} else if (w5 < 0){ 
    $('#cat5 .inside').css({ 
     "left" : "0", 
     "position" : "absolute" 
    }); 
} 

Vielen Dank für Ihre Ratschläge!

Answer 1

wickeln Vielleicht die sich wiederholende Code in einer Funktion:

function setScroll(value, selector) { 
    var element = $(selector + ' .inside'); 
    var left, position; 

    if (value > 0) { 
    left = -1 * value + "px"; 
    position = 'fixed'; 
    } else if (value < 0){ 
    left = 0; 
    position = 'absolute'; 
    } 

    element.css({left, position}); 
} 

var w3 = st - (3 * wh); 
var w4 = st - (3 * wh + fh[3]); 
var w5 = st - (3 * wh + fh[3] + fh[4]); 

setScroll(w3, '#cat3'); 
setScroll(w4, '#cat4'); 
setScroll(w5, '#cat5'); 

element.css({left, position}); ist ES6 Syntax, wenn Sie aus irgendeinem Grund nicht ES6 verwenden, ersetzen Sie diese Zeile mit:

element.css({ 
    left: left, 
    position: position 
}); 

Der Trick ist zu identifizieren, welche Teile sich ändern und welche Teile nicht. Ich habe hier nur zwei Dinge festgestellt: den Wert, den Sie mit 0 vergleichen, und das Element, das Sie ändern.

Answer 2

hier ist meine jede Funktion. jetzt ist es insgesamt in der Menge der Katzen felxible. f wird einmal außerhalb der onScroll-Funktion berechnet. Irgendwelche Vorschläge dazu? Vielen Dank.

$('.side-scroll').each(function() { 
    c[n] = st - (f[n]); 
    setScroll(c[n], '#cat' + n); 
    n++; 
    if(n == ss){n = 0;} 
});