Bootstrap 3 导航栏在滚动时调整大小并更改徽标

Posted 2023-05-08

【中文标题】Bootstrap 3 导航栏在滚动时调整大小并更改徽标

【英文标题】：Bootstrap 3 navigation bar resizes and changes logo when scroll

【发布时间】：2015-07-31 16:49:06

【问题描述】：

我希望获得将徽标更改为更简单版本的效果，并在向下滚动时将导航固定在顶部。

我已经尝试了一些我在堆栈溢出方面找到的解决方案，但我没有设法获得我想要的效果。

我想在这个网站上获得这种效果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>

我只知道我的导航固定在顶部，但我想要动画并加载较小版本的徽标。

有什么建议吗？

【参考方案1】：

他们在 dootrix 网站上使用此脚本。 (jQuery)

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

于是他们在header中添加了一个滚动类，然后通过css显示其他logo。

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

【讨论】：

嘿 @TeeDeJee 感谢您抽出宝贵时间，但 jQuery 似乎无法正常工作。有什么想法吗？

@pevoje 你能给我一个链接吗？

确定，给我写信到这个电子邮件 [e-mail]，我会马上给你发。我无法将其粘贴到此处，因为该网站正在开发中并且已禁止公开。再次感谢