jQuery - 在滚动功能中减少代码的技术答案

【问题标题】：jQuery - Technics for reduce code in on scroll functionjQuery - 在滚动功能中减少代码的技术
【发布时间】：2017-10-25 12:04:35
【问题描述】：

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

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

st : 是实际的 scrollTop() cat3 : 在这种情况下 3*wh 之前的内容的滚动顶部 cat4 : scrollTop 之前的内容 + cat3 的宽度 cat5 : scrollTop 之前的内容 + 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"
    });
}

感谢您的建议！

【问题讨论】：

标签： javascript jquery scrolltop

【解决方案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 比较的值，以及您正在修改的元素。

【讨论】：

那太好了，我现在会更多地使用这种功能，谢谢
如果这是您决定采用的解决方案，请使用复选标记将此答案标记为已接受：)
我看ES6没问题，有看不懂的浏览器吗？
可能是某个 each 函数中函数之后的部分？让我们想重，我们会有 cat3 - cat100 =)
IE11 将不支持速记属性，以及许多其他 ES6 特性。是的，如果你有更多这些，将它们存储在数组中并使用循环确实有意义。

【解决方案2】：

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

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

【讨论】：