具有 jQuery 效果的 Wordpress 导航栏默认菜单不起作用

Question

我想设置我的 Wordpres 导航栏/菜单的样式，以便在加载页面时菜单有点大，但是当您滚动一点时，菜单会随着过渡而变小。我正在制作一个集成了 bootstrap 的 wordpress 主题，并且我肯定 jQuery 已激活，因为我进行了测试 - 所以这不是问题。我还用 jQuery 更改了 $，所以这也不是问题...

也许有人能发现错误：

CSS：

.navbar

.navbar-default {
font-family: "Fugaz One"; 
padding-top: 20px;
}

.navbar-default2 {
font-family: "Fugaz One"; 
padding-top: 0px;
}

PHP：

jQuery(document).ready(function($) {

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) { 
        $('.navbar-default').addClass(".navbar-deafalt2");
      }
      else{
        $('.navbar-default').removeClass(".navbar-default2");
      }
});

});

还有我想要设置样式的导航栏：

 <nav class="nav navbar *navbar-default* navbar-fixed-top">
   <div class="container" >
                <div class="navbar-header">

                <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">                 
                    <span class="sr-only"><?php _e('Toggle navigation','_tk') ?> </span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                   </button>

                <!-- Your site title as branding in the menu -->

                    <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
              </div>

            <!-- The WordPress Menu goes here -->
        <?php wp_nav_menu(
            array(
                'theme_location' => 'primary',
                'container_class' => 'collapse navbar-collapse navbar-responsive-collapse',
                'menu_class' => 'nav navbar-nav navbar-right', 
                'fallback_cb' => '',
                'menu_id' => 'main-menu', 
                'walker' => new wp_bootstrap_navwalker()
            )
        ); ?>

                <!-- .navbar -->
</div><!-- .container -->

Answer 1

是不是因为你没有正确拼写default？

$('.navbar-default').addClass(".navbar-deafalt2");

Answer 2

我做了一个小提琴jsFiddle link

您不需要添加类，但您可以直接向导航栏添加一些 CSS：

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        /* or replace .css with something else like: add/removeClass */
        $('.navbar-default').css('padding-top', '0');
    }else{
        $('.navbar-default').css('padding-top', '20px');
    } 
});

也许这会有所帮助