jQuery

Question

我经常写这样的代码，我认为肯定有办法把它写得更短。如果有的话，我会很高兴学习一些新技术=)

请提醒它在滚动功能中。每个块用于横向滚动的一层。

st : 是actuel scrollTop() cat3 ：在这种情况下 3*wh 之前的内容滚动顶部 cat4 : scrollTop of content before + cat3 的宽度 cat5 : scrollTop of content before + layer1 的宽度 + 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

也许将重复的代码包装在一个函数中：

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 语法，如果出于某种原因你不能使用 ES6，请将此行替换为：

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

诀窍是识别哪些部分发生变化，哪些部分没有变化。我发现这里只有两件事发生了变化：您要与 0 进行比较的值，以及您要修改的元素。

Answer 2

这是我的每个功能。现在它的总猫数量是灵活的。 f 在 onScroll 函数之外计算一次。对此有何建议？谢谢

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

jQuery - 减少滚动功能代码的技术

jQuery - Technics for reduce code in on scroll function

javascript

scrolltop