JavaScript函数仅适用于index.html

我已经建立了一个实践网站，有多个页面。主页是

index.html。

我编写了一个JS函数，可以在向下滚动时更改标题的

不透明度。出于某种原因，它只能在
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");

函数checkHeaderScroll（）{
if（document.location.pathname=='/index.html'）{
如果（window.pageYOffset>10）{
标题[0]。style.opacity='1'；
logo.style.opacity='0'；
logo.style.transform='translateY（-250%）'；
}else if（window.pageYOffset<10）{
标题[0]。style.opacity='0'；
logo.style.opacity='1'；
logo.style.transform='translateY（0）'；
}
}否则{
标题[1]。style.opacity='1'；
}
}
window.addEventListener（'scroll'，checkHeaderScroll）；
console.log（“你好”）；
这是因为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);

函数checkHeaderScroll（）{
如果（window.pageYOffset>10）{
标题[0]。style.opacity='1'；
logo.style.opacity='0'；
logo.style.transform='translateY（-250%）'；
}else if（window.pageYOffset<10）{
标题[0]。style.opacity='0'；
logo.style.opacity='1'；
logo.style.transform='translateY（0）'；
}
}
window.addEventListener（'scroll'，checkHeaderScroll）；
您声明该函数仅在index.html上工作，行中为：
if（document.location.pathname=='/index.html'）。因此无法在其他页面上工作。
if（document.location.pathname=='/index.html'）
…我假设您的意思是，在
index.html
以外的页面上满足else条件时？为什么
标题[1]
而不是
标题[0]
？@pokeybit我原来有
标题[0]
它不起作用，所以我想看看它是否与HTML集合有关。它也不适用于
头[0]
。
@hensler Software
我不确定为什么
控制台.log（）
在其他页面上也不起作用。它不在功能范围内。你在其他页面上调用js文件吗？我是。我有几个其他功能，可以向导航添加功能，还可以检查窗口大小，它们可以在所有其他页面上工作。我在不相关的功能上遇到类型错误，但就是这样。我的第一个版本函数实际上是您在回答中编写的函数，但它不起作用。我只添加了
location.pathname
，以查看它对其他页面是否有作用