html 动态标题,动态标题仅适用于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;

}

• Home
• Bio
• Training
• Academy
• Gallery
• Store
• Contacts