javascript - 在 bootstrap 4 nav 上滚动添加类

Question

您好，我需要在滚动的 Bootstrap 导航栏上添加一个类。

所以当它滚动超过导航栏的高度时，它会从透明颜色变为不同的颜色。这种不同的颜色将设置在类上。

这是我目前所拥有的(似乎不起作用): 脚本

    <script type="text/javascript">
    $(window).scroll(function() {
      var scroll = $(window).scrollTop();

    if(scroll >= 56) {
        $(".bg-desar").addClass("bg-white");
    } else {
        $(".bg-desar").removeClass("bg-transparent");
    }
});
//# sourceURL=pen.js
</script>

Bootstrap 导航:

    <nav class="navbar navbar-expand-lg navbar-light fixed-top bg-desar">
        <div class="container">
            <div class="navi-left">
  <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    </div>
    <div class="navi-right">
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <?php
            wp_nav_menu( array(
                'theme_location' => 'primary',
                'menu_id' => 'primary-menu',
                'container_class' => 'collapse navbar-collapse',
                'container_id' => 'navbarCollapse',
                'menu_class' => 'navbar-nav',
                'fallback_cb' => '',
                'menu_id' => 'main-menu',

            ) );
        ?>
    </div>
        </div>
    </nav><!-- #site-navigation -->

我在 stackoverflow 上得到了代码，但是当我使用它时它不起作用。

请告诉我应该怎么做。

谢谢。

编辑:

这是我做的

<script>
    $(window).load(function(){
        var scroll = $(window).scrollTop();

        if(scroll >= 56) {
            $(".bg-desar").addClass("bg-white");
        } else {
            $(".bg-desar").removeClass("bg-white");
        }
    });
    </script>

所以 .bg-desar 是透明背景，.bg-desar.bg-white 将是白色。

我说的对吗？我应该把脚本放在哪里？在或之间？

Answer 1

jQuery(function($) {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if(scroll >= 56) {
    $(".bg-desar").addClass("bg-white");
    } else {
    $(".bg-desar").removeClass("bg-transparent");
    }
});