Question

因此，我今天下载了一个wordpress主题，以适应这样一个事实，即导航栏在移动设备上似乎不会变为白色，仅在台式机上向下滚动（网站URL www.genzoid.com），我一直在不懈地尝试数小时尝试解决此问题。有人可以帮忙吗？这是我的header.js中的代码

lower/upper

Answer 1

希望我创建的这个示例对您有所帮助。

$(function() {
   $(document).scroll(function(event){
      var st = $(this).scrollTop();
      if (st > 50){
         $('#navbar').addClass('navbar-dark');
      } else {
         $('#navbar').removeClass('navbar-dark');
      }
   });
});

html, body {
  margin: 0;
}

body {
  height: 2000px;
}

.navbar {
  background-color: red;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.navbar.navbar-dark {
  background-color: black;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar" class="navbar">My navbar</div>

移动导航栏不会滚动更改

1 个答案: