动态标题仅适用于index.html

Question

我正在建立一个带有功能标头的网站（如果向下滚动，它会使标头变小）。问题是在index.html上它可以正常工作，但是在我的第二页上却不能正常工作。为了创建第二页，我只复制了第一页并添加了一些额外的内容。有谁知道可能是什么问题？

// SCROLLING EFFECT 

const mainNav = document.querySelector('.header');

const img = document.querySelector('.logo');

// Change size of logo↓↓↓

if (getComputedStyle(mainNav).height == '70px') {

  img.style.height = '70px';

} else {

  img.style.height = '100px';

}

// when scrolling down, make it smaller↓↓↓

window.addEventListener('scroll', function() {

  if (window.pageYOffset > 100) {

    mainNav.className += ' small';

    img.style.height = '70px';

  } else {

    mainNav.classList = 'header';

    img.style.height = '100px';

  }

})

.header {

  background: black;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 20;

  height: 100px;

  transition: all 1s;

}

<!-- !Header -->

<header class="header  ">

  <div class="container">

    <div class="header-content">

      <img src="/Core/img/logo1.jpg" class="logo" alt="logo">

      <div class="menu-links">

        <ul class="links-list">

          <li><a href="/Core/index.html">Home</a></li>

          <li><a href="/Core/biography.html">Bio</a></li>

          <li><a href="/Core/training.html">Training</a></li>

          <li><a href="#">Academy</a></li>

          <li><a href="#">Gallery</a></li>

          <li><a href="#">Store</a></li>

          <li><a href="#">Contacts</a></li>

        </ul>

      </div>

    </div>

  </div>

</header>

Answer 1

在控制台中检查每个页面中的错误，而不仅仅是在index.html上，这可能是特定页面上的错误。