Question

我使用了Bootstrap 4.3.1导航栏，该导航栏固定在顶部且透明，向下滚动则变为黑色。刷新页面后，它再次变为透明，需要再次滚动以使其恢复原状。

这是我在其他网站上一直使用的代码，但是突然我遇到了这个问题，

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>

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

您需要

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');
  }
});

Answer 2

感谢您的回复，

当我删除了这部分代码后，它就起作用了，我不明白刷新问题上的swiper滑块和navbar透明之间的链接，

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

这是一个Hugo网站，因此无法放入jsfiddle，这是回购链接 repo

刷新页面后，Bootstrap 4导航栏变为透明

2 个答案: