在Bootstrap 4導航上滾動添加類

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>