Bootstrap 4 navbar становится прозрачным при обновлении страницы

Question

Я использовал bootstrap 4.3.1 navbar с фиксированным верхом и прозрачным, и при прокрутке он становится черным. После обновления страницы она снова становится прозрачной и ее необходимо снова прокрутить.

Это тот же код, который я использовал для других сайтов, но внезапно я сталкиваюсь с этой проблемой,

HTML

CSS

    .navbar {
  transition: padding 0.2s ease;
  z-index: 999;
}
.navbar-nav .nav-link {
  display: inline-block;
}
.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  font-size: 1.2rem;
  text-align: right;
  padding-right: 1rem;
}
.dropdown:hover > .dropdown-menu {
  display: block;
}
.dropdown-item:hover {
  background-color: #0e3e6e;
  color: #fff;
}
.dropdown-item {
  color: rgb(22, 22, 22);
}
.affix {
  transition: padding 0.2s linear;
  background-color: #000;
}
.navbar-toggler {
  color: #bca227;
  border: 1px solid #bca227;
}
@media (max-width: 576px) {
  .navbar-collapse {
    background-color: #000;
  }
}

и JS

    <script>
  // navbar change bg and shrink on scroll and animated on scroll
  $(window).scroll(function () {
    if ($(document).scrollTop() > 100) {
      $('.navbar').addClass('affix animated fadeInDown');
    } else {
      $('.navbar').removeClass('affix animated fadeInDown');
    }
  });
  //hide navbar after click
  $(".navbar-nav li a:not('.dropdown-toggle')").on('click', function () {
    $('.navbar-collapse').collapse('hide');
  });
</script>

что нужно сделать, чтобы он оставался цветным даже после обновления в режиме прокрутки?

Answer 1

Спасибо за ответ,

Когда я удалил эту часть кода, она сработала, я не понимаю связь между ползунком swiper и прозрачной навигационной панелью при выпуске refre sh,

    <section id="news">
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <style>
        #news {
            padding-top: 10rem;
        }

        .swiper-container {
            width: 100%;
            padding: 0rem 0rem 15rem;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            max-width: 700px;
            height: 600px
        }

        .caption {
            /* background-color: rgba(68, 68, 68, 0.5); */
            margin-top: 38rem;
            font-size: larger;
            padding: 0rem 1rem;
        }

        .swiper-container-horizontal>.swiper-pagination-bullets,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 50px;
        }

        @media(max-width:576px) {
            .swiper-container {
                padding: 0rem 0rem 15rem;
            }

            .swiper-slide {
                max-width: 100%;
            }

            .caption {
                /* background-color: rgba(68, 68, 68, 0.5); */
                font-size: medium;
            }

            .swiper-container-horizontal>.swiper-pagination-bullets,
            .swiper-pagination-custom,
            .swiper-pagination-fraction {
                bottom: 15px;
            }
        }
    </style>
    <div class="swiper-container">
        <h1 class="text-center mb-5">latest news</h1>
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(/images/Sharath.jpg)">
                <div class="caption text-center d-flex flex-column justify-content-center">
                    <h3>Uday Shankar Award</h3>
                    <p>Sharat has been bestowed the prestigious "Uday Shankar" award for excellence in choreography and
                        production making from AttenDance!
                    </p>
                </div>
            </div>
            <div class="swiper-slide" style="background-image:url(/images/Rajyothsava_award.jpg)">
                <div class="caption text-center d-flex flex-column justify-content-center">
                    <h3>Rajyothsava Award</h3>
                    <p>On 1st November 2019 at Ravindra Kalakshetra, Bangalore, Prabhat Arts International won the
                        second highest state honor - “The Rajyothsava award” for its contribution in the field of Art
                        and Culture!</p>
                </div>
            </div>
            <div class="swiper-slide" style="background-image:url(/images/Rajyothsava_award1.jpg)">
                <div class="caption text-center d-flex flex-column justify-content-center">
                    <h3>Rajyothsava Award</h3>
                </div>
            </div>


        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- Initialize Swiper -->
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {
                el: '.swiper-pagination',
            },
        });
    </script>
</section>

Это сайт Ху go, поэтому не могу вставить jsfiddle, вот ссылка на репо репо

Answer 2

Вам также нужно

if ($(document).scrollTop() > 100) {
  $('.navbar').addClass('affix animated fadeInDown');
} else {
  $('.navbar').removeClass('affix animated fadeInDown');
}

при загрузке окна. Итак, добавьте

$(window).load(function() {
  if ($(document).scrollTop() > 100) {
    $('.navbar').addClass('affix animated fadeInDown');
  } else {
    $('.navbar').removeClass('affix animated fadeInDown');
  }
});