html - 使用页面滚动更改页眉背景的问题

Question

我正在实现一个固定的透明标题，当页面滚动超过 100 像素时，它会变成黑色。

目前，在 main.js 中我有一个函数:

// Header scroll class
   $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
     $('.header').addClass('header-scrolled');
    } else {
      $('.header').removeClass('header-scrolled');
    }
  });

在 main.css 中我有:

/*-------
# Header
---------*/
#header {
  padding: 3px 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
  background-color: transparent;
}

.header-scrolled {
  background-color: black;
}

html页面格式如下:

<header id="header" id="home">
  <div class="container">
     <li class="row align-items-center justify-content-between d-flex">
       <div id="logo">
         <a href="home.html"><img width="160" height="160" src="{% static 
         'img/my_logo.png' %}" alt="" title="" /></a>
       </div>
       <nav id="nav-menu-container">
         <ul class="nav-menu">
           <li class="menu-active"><a href="#home">{% trans "Home" %}</a> 
           </li>
           <li class="menu-active"><a href="#contacts">{% trans "Contacts" 
           %}</a></li>
         </ul>
       </nav>
     </li>
   </div>
</header>

目前，标题是固定和透明的。然而，当我向下滚动时，它不会变黑(尽管在检查器中似乎添加了标题滚动)。我似乎找不到解决问题的方法(所提供的类似问题的其他建议均无效)...也许我遗漏了什么？

Answer 1

希望对您有所帮助。

#header.header-scrolled {
  background-color: black;
}