添加媒體查詢時，我的 javascript 代碼不起作用？

Question

以前從來沒有遇到過這個問題。 基本上我通過Javascript在我的標題上添加了一個類列表切換，它通常工作正常，但是當我添加與標題無關的媒體查詢時，它停止工作。 如果您需要更多信息，請告訴我。 有任何想法嗎？ 我迷路了

編輯：添加了額外的 HTML 代碼

這是我所有的代碼

 window.addEventListener('scroll', () => { let header = document.querySelector('.page-header'); header.classList.toggle('sticky', window.scrollY > 30); })

 .page-header { width: 100%; height: 60px; background-color: var(--main-bg-color); display: flex; flex-direction: row; align-items: center; color: white; font-weight: bold; overflow: hidden; position: fixed; transition: .7s; z-index: 1; } .page-header.sticky { background-color: white; color: black; position: fixed; z-index: 1; transition: .7s; box-shadow: 5px 5px 3px lightgray; } .portfolio-images { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; margin-top: 50px; } .portfolio-images img { margin-right: auto; margin-left: auto; } .portfolio-images img:hover { filter: brightness(.4); transition: .4s; cursor: pointer; } /* media queries */ @media all and (max-width: 1275px) { .portfolio-images { grid-template-columns: 1fr 1fr; } .portfolio-images img { width: 40vw; height: auto; } @media all and (max-width: 500px) { .portfolio-images { grid-template-columns: 1fr; } .portfolio-images img { width: 90vw; height: auto; } }

 <div class="page-header"> <h1 id="logo">ParallaxStudios</h1> <div class="navigation-container"> <ul> <li><a class="navigation-item">Portfolio</a></li> <li><a class="navigation-item">Socials</a></li> <li><a class="navigation-item">Staff</a></li> </ul> </div> <div class="rightside-navigation"> <h3 id="contact">Contact</h3> </div> </div> <div class="portfolio-container"> <h1>Current Projects</h1> <div class="portfolio-images"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> </div> </div>

Answer 1

在此處的媒體查詢之一的末尾，您確實缺少一個} ：

@media all and (max-width: 1275px) {
    .portfolio-images {
      grid-template-columns: 1fr 1fr;
    }
    .portfolio-images img {
      width: 40vw;
      height: auto;
  }
} //this one was missing.
  
  @media all and (max-width: 500px) {
    .portfolio-images {
      grid-template-columns: 1fr;
    }
    .portfolio-images img {
      width: 90vw;
      height: auto;
    }
  }