移动导航栏不会滚动更改

时间:2019-06-18 20:06:29

标签: php jquery html wordpress jquery-mobile

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

lower/upper

1 个答案:

答案 0 :(得分:0)

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

$(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>