Question

您好我需要在滚动时在引导程序导航栏上添加一个类。

因此，当它滚动传递导航栏的高度时，它将从透明颜色变为不同的颜色。这个不同的颜色将在课堂上设置。

这是我到目前为止所做的（似乎不起作用）：脚本

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

引导导航：

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

}

Answer 2

我根据你的演示制作了这个演示，你可以查看更多细节：

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll > 50) {
    $(".navbar").removeClass("bg-transparent").addClass("bg-white");
  } else {
    $(".navbar").removeClass("bg-white").addClass("bg-transparent");
  }
});

.navbar {
  color: #fff;
  transition: all 0.3s ease;
}

.bg-white {
  background-color: #fff;
  color: #000;
  border-bottom: 1px solid #ddd;
}

.bg-image img {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="navbar navbar-expand-lg navbar-light fixed-top bg-transparent">
    <div class="container">
      <div class="navi-left">
        <h4>Left</h4>
      </div>
      <div class="navi-right">
        <h4>Right</h4>
      </div>
    </div>
  </div>
</header>
<div class="page-wrapper">
  <div class="bg-image">
    <img src="https://unsplash.it/1280/720" alt="bg">
  </div>
  <div class="container">
    <p>
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique asperiores vero laudantium nesciunt placeat, nihil nulla. Aperiam, laborum eos beatae non voluptates maiores quas, delectus rerum necessitatibus unde ut! Temporibus odio animi laudantium
        velit nisi ipsa itaque sint maxime. Quam, accusamus perferendis consequatur reiciendis atque vitae dicta dolorum a quod unde voluptate iusto esse commodi cum eligendi! Rem, cupiditate! Molestias numquam laboriosam accusantium aut culpa hic officia
        possimus voluptatum voluptate necessitatibus officiis nulla modi asperiores animi temporibus maxime dolores quam cumque perspiciatis, delectus ratione, odio natus repellat eum. Repudiandae reprehenderit eveniet optio, magni blanditiis, iusto expedita
        exercitationem necessitatibus consequuntur, totam labore dolorum sed officia molestiae! Consequuntur expedita sequi, sed facere consectetur aspernatur doloremque ipsum est eius commodi amet, facilis, repellat molestias optio eligendi. Quis corporis
        velit fuga temporibus facere, eaque, repellendus recusandae delectus beatae numquam aut necessitatibus in voluptate sint obcaecati quo distinctio libero, consequatur neque! Enim suscipit ea molestiae facilis eius, eos nihil nesciunt magni voluptatem
        quis neque placeat deleniti commodi accusamus dignissimos corrupti repellat ullam animi quibusdam exercitationem perspiciatis. Animi veniam deleniti sunt aspernatur odit minima incidunt. Minima modi fuga optio quas non placeat esse odit excepturi
        voluptate eum cumque officiis fugit ipsa, consectetur assumenda. Fugit sapiente ipsa dolores eveniet? Assumenda quas unde voluptatum impedit ipsa iure necessitatibus distinctio corrupti. Architecto quibusdam odit, ut delectus ea sit, sunt iure
        voluptas dolores fugiat assumenda maxime eos saepe corrupti minima sapiente distinctio quo tenetur eligendi ab cumque facere suscipit libero consectetur. Ea repudiandae in velit ullam, excepturi odio ratione aperiam eveniet numquam est architecto
        accusamus similique, neque, assumenda animi deserunt. Officia quae odio totam earum libero impedit veritatis iusto officiis quos temporibus est quod, animi amet voluptatibus illo fuga repellendus nihil deserunt nam, ducimus sint numquam alias.
        Rerum perspiciatis excepturi magni aperiam illo eos quisquam non, libero quis at voluptatum veritatis, odit illum, necessitatibus eum minus earum! Dolores culpa natus animi nam qui, commodi tempore neque possimus iste repudiandae libero aut itaque
        amet earum illo numquam, quisquam laborum odio, optio expedita voluptate exercitationem. Ut provident aut eligendi laborum animi id, eaque accusamus vero libero laudantium sapiente saepe, inventore corrupti a qui. Aut nulla consequuntur maxime!
        Molestiae pariatur itaque earum ducimus harum? Impedit in corrupti rem aliquam hic? Voluptates explicabo quo, aliquam dolorum nisi id aut praesentium fuga neque aperiam possimus hic quis inventore obcaecati doloremque nihil molestiae corporis,
        minima voluptatum fugit delectus. Voluptas, sint porro! Corrupti eos ad hic sed consequuntur error, voluptatum odio dolorem tempora, mollitia explicabo cumque magnam aliquam repudiandae unde deleniti ipsam quasi culpa commodi quod aperiam nesciunt
        corporis id! Tempora, est necessitatibus voluptas beatae a quia maiores, esse omnis quos eligendi eaque minus fugit neque. Repellendus quam cum asperiores accusantium consequatur, laboriosam nulla doloribus maxime modi possimus esse tempora laudantium
        reprehenderit ipsa deleniti? Eaque, voluptas deserunt odit esse inventore doloremque ex dolores ratione quia atque omnis numquam, qui soluta magnam officiis dolorum labore repellendus animi enim exercitationem aliquid culpa. Natus hic, fugiat
        dolorum necessitatibus expedita debitis dolor voluptatum cupiditate ut voluptatem id quidem vero quo laudantium accusamus pariatur animi, in repellendus nobis voluptates? Sapiente rem deserunt voluptatibus quaerat corporis voluptatum, qui eligendi
        rerum hic, porro ab labore cum nisi voluptas, vel explicabo magnam blanditiis at culpa. Optio itaque officia explicabo eius illo cumque, architecto dicta. Eius, perferendis aut harum accusamus, fugit quas optio, recusandae ducimus enim quaerat
        molestias quidem aliquid quo ipsum ab ut minima eum quae ad eligendi doloremque fugiat repellendus. Repellendus voluptatem aspernatur placeat nostrum excepturi velit, laudantium quae tenetur accusantium ipsa officia dignissimos amet at! At labore
        officiis neque consequatur alias eaque vel voluptates ad laborum minima, inventore dicta. Inventore dolore, esse tempore fugiat quisquam consequatur, optio hic adipisci minus necessitatibus doloremque quam nesciunt laboriosam accusantium pariatur
        quaerat nobis deleniti reprehenderit sapiente ea! Labore sapiente sit molestiae facere vitae quod necessitatibus rerum doloremque, dolorem non, eos, omnis quasi. Consequatur asperiores ea iure aut atque ipsa ab explicabo possimus odit omnis, ullam
        totam, nostrum officia esse corrupti voluptas molestiae dignissimos. Repellat soluta non voluptates architecto. Fugiat, ipsa quibusdam nam rerum architecto necessitatibus animi? Cumque, cupiditate nisi rem aliquid aut velit quaerat a doloremque
        veniam vel vitae, id explicabo nobis eum ea unde ex. Harum, officia voluptatum? In, cumque ut aut, nemo amet voluptatem at voluptate aliquid laudantium dicta sequi reprehenderit? Assumenda voluptas necessitatibus saepe eveniet ex veritatis atque
        voluptate doloribus vero exercitationem! Mollitia vitae, eveniet earum quis praesentium odit obcaecati, culpa id excepturi, nulla quas. Magni fuga nisi vel laudantium neque fugit voluptatibus quas porro delectus voluptatum, possimus obcaecati
        rerum, ea modi cupiditate doloremque totam suscipit ipsa eum amet voluptatem alias officia nulla. Sequi impedit deleniti iusto voluptatibus nulla nostrum possimus quisquam, beatae eveniet explicabo pariatur fuga magni, excepturi culpa veniam!
        Obcaecati architecto numquam nulla officia id, provident porro molestiae impedit! Porro atque, illo incidunt molestiae voluptate sint possimus perspiciatis aliquid rerum dolorum vel! Laboriosam nulla impedit, molestiae dolores asperiores quae
        reprehenderit possimus molestias aperiam hic laudantium, quibusdam odit iste quis accusamus delectus. Aliquid est esse odio voluptatem minus eligendi optio hic adipisci. Sunt repudiandae ducimus, provident minus, excepturi maxime eligendi culpa
        enim consequatur numquam ipsum aperiam totam, possimus sed ratione? Perspiciatis, nam excepturi eum sint quia est repellendus et modi at neque rerum omnis ipsa vitae. Sed optio itaque veritatis nobis illo. Maiores distinctio quo debitis illo hic,
        incidunt animi vel, molestias deleniti assumenda fugiat laborum recusandae voluptates veritatis quae excepturi? Expedita, est! Ducimus nulla ratione ipsam voluptate, quae aliquid dolore laboriosam dicta molestiae ad reprehenderit sunt magni odio
        iusto autem cumque rerum inventore numquam quisquam fuga harum corrupti? Amet at animi atque laudantium nobis et facilis eius? Impedit enim consectetur eos nostrum nesciunt repellat voluptatibus sit quam iste ut! Nobis, atque modi repudiandae
        nisi tempore ratione eveniet provident fugit eum voluptates sint iure velit voluptate aspernatur! Quas possimus harum enim perspiciatis distinctio, repellat quasi quo suscipit omnis at voluptas incidunt reiciendis dolor! Temporibus ut, sint molestiae
        deleniti, ex dolores placeat et tempora ipsum atque quas sapiente provident inventore accusamus. Soluta illo ad odit quidem. Consequatur, quae magnam obcaecati et dolor mollitia corrupti.</div>
    </p>
  </div>
</div>

在bootstrap 4 nav上滚动时添加类

2 个答案: