Question

我经常使用这样的代码，我认为有一种方法可以将它写得更短。如果有一个=）

，我会很高兴学到一些新技术

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

st：是执行者scrollTop（） cat3：在这种情况下3 * wh之前的内容scrollTop cat4：在cat3的宽度之前的scrollTop内容 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"
    });
}

感谢您的建议！

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函数之外计算一次。有什么建议吗？感谢。

null

jQuery - 用于减少滚动函数

2 个答案: