Я хочу получить эффект изменения логотипа на более простую версию и зафиксировать навигацию вверху при прокрутке вниз.

Я пробовал использовать некоторые из найденных мной решений по переполнению стека, но мне не удалось добиться желаемого эффекта.

Я хочу получить такой эффект, как на этом веб-сайте 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
Damir 19 Май 2015 в 20:51

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;}
2
TeeDeJee 19 Май 2015 в 22:47
Привет @TeeDeJee, спасибо за уделенное время, но похоже, что jQuery не работает. Любые идеи?
 – 
Damir
19 Май 2015 в 21:25
Может ссылку дадите?
 – 
TeeDeJee
19 Май 2015 в 21:27
Конечно, напишите мне на это письмо dndme@hmamail.com, и я сразу же пришлю вам. Я не могу вставить его сюда, потому что веб-сайт находится в стадии разработки и закрыт для всех. Еще раз спасибо
 – 
Damir
19 Май 2015 в 22:12