将两个类似的 .js 函数合二为一

Question

我知道这对你们大多数人来说是基本的，但我对这门语言没有那么有经验。 因此，当我将两个代码都添加到 functions.php 时，它们不起作用。 但它只有在我只使用其中一个时才有效。 所以我想如果它们都在相同的代码行中，它可能会起作用。 我试图做到这一点，但无法让它发挥作用。

这是第一个功能：

window.onscroll = function() {
    scrollFunction()
};
    
function scrollFunction() {
    if (document.body.scrollTop > 90 ||
        document.documentElement.scrollTop > 90)
    {
        document.getElementById("quadmenu_0")
                    .style.padding = "20px 0px";

    }
    else {
        document.getElementById("quadmenu_0")
                    .style.padding = "180px 0px 40px";
            
    }
}

这是第二个功能：

window.onscroll = function() {
    scrollFunction()
};
    
function scrollFunction() {
    if (document.body.scrollTop > 150 ||
        document.documentElement.scrollTop > 150)
    {
        document.getElementById("ast-mobile-header")
                    .style.backgroundColor = "red";

    }
    else {
        document.getElementById("ast-mobile-header")
                    .style.backgroundColor = "white";
            
    }
}

Answer 1

您可以在 onScroll 侦听器中调用这两个函数。 他们当然需要有不同的名字（最好选择比下面的例子更合乎逻辑的名字）

window.onscroll = function() {
    scrollFunction1()
    scrollFunction2()
};

function scrollFunction1() {
  if (document.body.scrollTop > 90 ||
    document.documentElement.scrollTop > 90) {
      document.getElementById("quadmenu_0")
        .style.padding = "20px 0px";
  } else {
    document.getElementById("quadmenu_0")
      .style.padding = "180px 0px 40px";      
  }
}

function scrollFunction2() {
  if (document.body.scrollTop > 150 ||
    document.documentElement.scrollTop > 150) {
      document.getElementById("ast-mobile-header")
        .style.backgroundColor = "red";
  } else {
    document.getElementById("ast-mobile-header")
      .style.backgroundColor = "white";
  }
}