Bootstrap 3導航欄在滾動時調整大小和更改徽標

Question

我想要獲得將徽標更改爲更簡單版本的效果，並在向下滾動時將導航固定在頂部。

我已經嘗試了一些我在堆棧溢出中找到的解決方案，但是我沒有設法得到我想要的效果。

我想這樣的網站http://dootrix.com/

這個效果這是我的代碼（我使用WordPress和Bootstrap3）：

<header> 
    <div class="container-fluid full-width-menu navbar-fixed-top"> 
    <div class="container"> 
     <div class="row"> 
       <div class="logo img-responsive col-md-4"> 
        <a class="logo-link" href="<?php echo get_bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory') ?>/images/logo.svg" /></a> 
       </div> <!-- end logo -->  
       <div class=""> <!-- Menu --> 
        <nav class="main-menu navbar-inverse col-md-offset-2 col-md-6" role="banner"> 
         <div class="navbar-header"> 
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          </button> 
         </div> 

          <?php 
           wp_nav_menu(array(
            'menu'    => 'primary', 
            'theme_location' => 'primary', 
            'depth'    => 1, 
            'container'   => 'nav', 
            'container_class' => 'navbar-collapse bs-navbar-collapse collapse', 
            'container_id'  => 'bs-example-navbar-collapse-1', 
            'menu_class'  => 'nav navbar-nav no-gutter cl-effect-4', 
            'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
            'walker'   => new wp_bootstrap_navwalker()) 
           ); 
          ?> 
        </nav>  
       </div> <!-- End menu --> 
     </div> <!-- end row --> 
    </div> <!-- end container --> 
    </div> <!-- end container-fluid --> 
    </div> 
    </header> 

我只帶了我的導航是固定的在頂部，但我想要動畫並加載徽標的較小版本。

有什麼建議嗎？

Answer 1

他們在dootrix網站上使用此腳本。 （jQuery）

$(window).scroll(function(){ 
    if ($(window).scrollTop() > 30) { 
     $('.logo').addClass('scrolling'); 
    } else { 
     $('.logo').removeClass('scrolling'); 
    } 
}); 

因此，他們添加一個滾動類的頭，然後通過CSS顯示其他標誌。

<div class="logo img-responsive col-md-4"> 
    <a class="logo-link large-logo" href="<?php echo get_bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory') ?>/images/logo.svg" /></a> 
    <a class="logo-link scrolling-logo" href="<?php echo get_bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory') ?>/images/scrolling-logo.svg" /></a> 
</div> <!-- end logo --> 

CSS：

.large-logo {display:block;} 
.scrolling-logo {display:none;} 
.scrolling .large-logo {display:none;} 
.scrolling .scrolling-logo {display:block;}