Мобильный Навбар не меняется при прокрутке - PullRequest
Новая
       32

Мобильный Навбар не меняется при прокрутке

0 голосов
/ 18 июня 2019

Итак, сегодня я скачал тему 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 Ответ

0 голосов
/ 19 июня 2019

Надеюсь, этот пример, который я создал, поможет. 

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