0

当用户在我的导航栏上滚动时，我正在尝试添加和删除活动类。当它停靠在页面顶部时，我希望它是透明的，如果用户滚动 > 1，我希望它变成白色。

我让它在桌面上工作，但在移动屏幕上我遇到了它没有添加活动类或添加类然后在菜单打开并且用户位于页面顶部时完全删除它的问题。

这是我到目前为止所拥有的。

<script>
// mobile active class toggle 
// THIS IS WHAT IS NOT WORKING!!!
// when a user clicks on the menu button I want to check if the YOffset < 1[docked] and if the menu is open. If so I want to keep the active class. If it doesn't match both statements I want to remove the active class. 

var menu = document.getElementById('menuBtn');
menu.addEventListener("click", function() { 
  var nav = document.getElementById('navBar');
  if(window.pageYOffset < 1 && menu.classList.contains('w--open')) {
    nav.classList.remove('active');
  } else {
    nav.classList.add('active'); 
  }  
});
  
document.getElementsByClassName('.nav-link').addEventListener("click", function() {
 document.getElementById('navBar').classList.remove('active'); 
 document.getElementById('menuBtn').classList.remove('w--open');
});
</script>


<div>
  <a href="/" aria-current="page" class="brand w-nav-brand w--current"></a>
  <nav role="navigation" class="nav-menu w-nav-menu">
    <div data-hover="" data-delay="0" class="dropdown w-dropdown">      
      <nav>
        <a class="nav-link"></a>
        <a class="nav-link"></a>
      </nav>
    </div>
    <div data-hover="" data-delay="0" class="dropdown w-dropdown">
      <nav>
        <a class="nav-link"></a>
        <a class="nav-link"></a>
      </nav>
    </div>
  </nav>
  <div id="menuBtn" class="menu-button w-nav-button">
     <div class="icon w-icon-nav-menu"></div>
  </div>
</div>

这是该网站的预览链接。竞选技术

4

0 回答 0