Question

我试图使用1个函数来控制由滚动影响的多个元素。我不熟悉CSS以外的编码。所以我对最好的方法有点困惑。

function scrollFunctions() {
  var elmnt = document.getElementById("rbuxApp");
  var y = elmnt.scrollTop;
  var head = document.getElementById("header");
  var buttons = document.getElementById("scrollBtnHolder")

  // Add class for header
  if(y >= 4 && head.classList.contains("min-header")) {
    head.classList.add("min-header");
  }
  else {
    head.classList.toggle("min-header");
  };

  // Add class for button
  if(y >= 1000 && buttons.classList.contains("show-scroll-btn")) {
    buttons.classList.add("show-scroll-btn");
  }
  else {
    buttons.classList.toggle("show-scroll-btn");
  };
}

Answer 1

使用toggle的第二个参数。

添加/删除可见，取决于作为第二个参数传递给toggle()
的测试条件

head.classList.toggle("min-header", y >= 4 && head.classList.contains("min-header"));

buttons.classList.toggle("show-scroll-btn", y >= 1000 && buttons.classList.contains("show-scroll-btn"));

如果条件评估为true，则类将添加到元素中，如果条件评估为false，则将删除类。

＆＃13;

function scrollFunctions() {
    var elmnt = document.getElementById("rbuxApp");
    var y = elmnt.scrollTop;
    var head = document.getElementById("header");
    var buttons = document.getElementById("scrollBtnHolder")

    head.classList.toggle("min-header", y >= 4 && head.classList.contains("min-header"));

    buttons.classList.toggle("show-scroll-btn", y >= 1000 && buttons.classList.contains("show-scroll-btn"));
}

＆＃13;

在函数中编写2 if else语句的正确方法是什么？

1 个答案: