Question

我建立了一个有多个页面的练习网站。主页是index.html.，我编写了一个JS函数，该函数在向下滚动时更改标题的opacity。由于某些原因，它只能在index.html上运行，而不能在网站上的其他页面上运行。我编写的所有其他功能都可以在所有页面上使用。我一直在阅读，看是否与页面加载有关，但是我真的找不到任何具体的东西。任何人都不能对为什么此特定功能仅在index.html上起作用有任何见解。

标题的CSS

header {
  position: fixed;
  width: 100%;
  background: var(--white-background);
  border-bottom: 2px solid #f1f1f1;
  font-family: var(--company-font);
  opacity: 0;
  transition: opacity .5s;
  z-index: 10;
}

相关功能

即使最后的console.log()仅在index.html上起作用

function checkHeaderScroll() {
  if(document.location.pathname == '/index.html')  {
    if (window.pageYOffset > 10) {
      header[0].style.opacity = '1';
      logo.style.opacity = '0';
      logo.style.transform = 'translateY(-250%)';
    } else if (window.pageYOffset < 10) {
      header[0].style.opacity = '0';
      logo.style.opacity = '1';
      logo.style.transform = 'translateY(0)';
    }
  } else {
    header[1].style.opacity = '1';
  }
}
window.addEventListener('scroll', checkHeaderScroll);

console.log("hello");

Answer 1

这是因为checkHeaderScroll（）函数的第2行：-

if(document.location.pathname == '/index.html') {

如果您删除第2、12、13和14行，这应该可以在您的所有页面上使用。

因此您的新功能如下：-

function checkHeaderScroll() {
    if (window.pageYOffset > 10) {
      header[0].style.opacity = '1';
      logo.style.opacity = '0';
      logo.style.transform = 'translateY(-250%)';
    } else if (window.pageYOffset < 10) {
      header[0].style.opacity = '0';
      logo.style.opacity = '1';
      logo.style.transform = 'translateY(0)';
    }
}
window.addEventListener('scroll', checkHeaderScroll);

Answer 2

您说过该功能仅适用于index.html行： if（document.location.pathname =='/index.html'）。因此无法在其他页面上使用。

JavaScript函数仅适用于index.html

2 个答案: