动态标题仅适用于index.html

我正在建立一个带有功能标头的网站(如果向下滚动,它会使标头变小)。问题是在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>


烙印99
浏览 169回答 1
1回答

天涯尽头无女友

在控制台中检查每个页面中的错误,而不仅仅是在index.html上,这可能是特定页面上的错误。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript