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

Posted 2023-05-09

【中文标题】移动导航栏在滚动时不更改

【英文标题】：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);

【参考方案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>