jQuery - スクロール機能のコードを減らすためのテクニック

Question

私はしばしばこのようなコードを持っています。私はそれをもっと短く書く方法があると思います。ある場合は新しい技術を学ぶのがうれしいです=）

オンスクロール機能の中にそれを思い出させてください。各ブロックは横にスクロールされた1つのレイヤー用です。

ST：actuel scrollTopスプライト（）がある CAT3：3の前にコンテンツのscrollTopスプライト*この場合WH CAT4：レイヤ1 +幅の+幅前にコンテンツのscrollTopスプライト：CAT3の+幅 CAT5前にコンテンツのscrollTopスプライト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" 
    }); 
} 

ありがとうございました！

Answer 1

おそらく機能で繰り返しコードをラップ：何らかの理由であなたがES6を使用できない場合

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});は、ES6構文である、とこの行を置き換える：

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

トリックどの部分が変化し、どの部分が変化しないのかを特定することである。私は、ここで変更されるのは2つだけです：0と比較する値と、変更している要素。

Answer 2

ここに私の各機能があります。今では猫の量の合計felxible。 fはonScroll関数の外部で1回計算されます。これに対する提案はありますか？ありがとう。

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