Twitter bootstrap 当页面刷新时，Bootstrap 4导航栏变为透明

我使用了Bootstrap4.3.1NavBar固定顶部和透明，当向下滚动时，它会变为黑色。刷新页面后，页面再次变为透明，需要再次滚动才能恢复

这与我在其他网站上使用的代码相同，但我突然面临这个问题

HTML

  <nav class="navbar navbar-dark fixed-top navbar-expand-lg">
<div class="container-fluid">
  <a class="navbar-brand" href="{{.Site.BaseURL}}">
    <img src="/images/logo.png" class="img-fluid" style="height: 120px;" alt="Prabhat logo">
  </a>
  <button class="navbar-toggler" data-target="#my-nav" data-toggle="collapse" aria-controls="my-nav"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="my-nav" class="collapse navbar-collapse">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#about" aria-label="about section link">About us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#repertoire" aria-label="Repertoire section link">Our Repertoire</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#training" aria-label="Training section link">Training</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#harikatha" aria-label="Harikatha section link">Harikatha</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#costumes" aria-label="Costumes section link">Costumes</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio" aria-label="Gallery section link">Gallery & Media </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#news" aria-label="News section link">News</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#footer" aria-label="Contact section link">Contact us</a>
      </li>
    </ul>
  </div>
</div>

和JS

    .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;
  }
}

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

//导航栏在滚动时更改背景和收缩，并在滚动时设置动画
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>100）{
$（'.navbar'）.addClass（'粘贴动画fadeInDown'）；
}否则{
$（'.navbar'）.removeClass（'粘贴动画fadeInDown'）；
}
});
//单击后隐藏导航栏
$（“.navbar nav li a:not（“.dropdown toggle”））。on（'click'，function（）{
$（'.navbar collapse'）。collapse（'hide'）；
});

如何使其即使在滚动位置刷新后仍保持彩色？

您需要

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

窗口加载事件。 所以，加上

感谢您的回复

当我删除这部分代码时，它起作用了，我不理解swiper slider和navbar transparent在刷新问题上的链接

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

#新闻{
垫面：10rem；
}
.swiper容器{
宽度：100%；
填充：0rem 0rem 15rem；
}
.滑梯{
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
最大宽度：700px；
高度：600像素
}
.标题{
/*背景色：rgba（68,68,68,0.5）*/
最高保证金：38雷姆；
字体大小：较大；
填充：0rem 1rem；
}
.swiper容器水平>.swiper分页项目符号，
.swiper分页自定义，
.swiper分页分数{
底部：50px；
}
@介质（最大宽度：576px）{
.swiper容器{
填充：0rem 0rem 15rem；
}
.滑梯{
最大宽度：100%；
}
.标题{
/*背景色：rgba（68,68,68,0.5）*/
字号：中等；
}
.swiper容器水平>.swiper分页项目符号，
.swiper分页自定义，
.swiper分页分数{
底部：15px；
}
}
最新消息
乌代尚卡尔奖
沙拉特因其出色的编舞和表演而被授予久负盛名的“Uday Shankar”奖
从出席制作！

拉吉奥萨瓦奖
2019年11月1日，在班加罗尔的Ravindra Kalakshetra，Prabhat Arts International赢得了
第二最高国家荣誉——“拉吉奥萨瓦奖”，表彰其在艺术领域的贡献
还有文化

拉吉奥萨瓦奖
var swiper=新的swiper（“.swiper容器”{
效果：“coverflow”，
格雷博：是的，
中心幻灯片：对，
SlideService视图：“自动”，
覆盖流效应：{
轮换：50，
拉伸：0，
深度：100，
修饰语：1，
幻灯片：没错，
},
分页：{
el:“.swiper分页”，
},
});

这是一个Hugo站点，所以不能放入JSFIDLE，这里是repo链接

---

您能提供一个有效的JSFIDLE吗？

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