Hinzufügen Klasse auf Bildlauf auf Bootstrap 4 nav

Question

Hallo Ich muss eine Klasse in der Bootstrap-Navigationsleiste auf Bildlauf hinzufügen.

Also, wenn es scroll die Höhe der Navbar übergeben, wird es von transparenten Farbe zu einer anderen Farbe wechseln. Diese andere Farbe wird für die Klasse festgelegt.

Hier ist, was ich bisher haben (was nicht zu funktionieren scheint): Das Skript

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

Der Bootstrap nav:

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

ich den Code hier auf Stackoverflow bekommen, aber Wenn ich es benutze, funktioniert es nicht.

Bitte lassen Sie mich wissen, was ich tun soll. T

Vielen Dank.

Edit:

Jetzt ist hier, was ich

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

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

So .bg-desar ist ein transparenter Hintergrund getan haben, .bg-desar.bg-weiß weiß sein.

Bin ich richtig? Und wo sollte ich das Drehbuch ablegen? zwischen dem oder?

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

Ich habe diese Demo auf Ihnen basiert, können Sie diese für weitere Informationen überprüfen:

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