移动导航栏在滚动时不更改答案

【问题标题】：Mobile Navbar not Changing on scroll移动导航栏在滚动时不更改
【发布时间】：2019-11-01 12:34:46
【问题描述】：

所以我今天下载了一个 wordpress 主题，遇到这样一个事实，即导航栏在移动设备上似乎没有变为白色，仅在桌面上向下滚动（站点 URL www.genzoid.com）我一直在不知疲倦地尝试几个小时试图解决这个问题。有人可以帮忙吗？这是我的 header.js 中的代码

;(function($){
$(document).scroll(function(){
    if ($(this).scrollTop() > 50) {
            $('.navbar').removeClass('navbar-dark');
            $('.navbar').addClass('navbar-light');
            $('.navbar').removeClass('bg-transparent');
            $('.navbar').addClass('bg-white');
            $('.site-title').addClass('text-dark');
            $('.navbar .cta.btn-outline-success').addClass('text-dark');
            $('.navbar').addClass('border-bottom');
    } else {
            $('.navbar').removeClass('navbar-light');
            $('.navbar').addClass('navbar-dark');
            $('.navbar').removeClass('bg-white');
            $('.navbar').addClass('bg-transparent');
            $('.site-title').removeClass('text-dark');
            $('.navbar .cta.btn-outline-success').removeClass('text-dark');
            $('.navbar').removeClass('border-bottom');
    }   
});
})(jQuery);

【问题讨论】：

标签： php jquery html wordpress jquery-mobile

【解决方案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>

【讨论】：