[英]Bootstrap 3 navigation bar resizes and changes logo when scroll
我希望獲得將徽標更改為更簡單的版本的效果,並在向下滾動時將導航固定在頂部。
我已經嘗試過一些在堆棧溢出時發現的解決方案,但是我沒有獲得想要的效果。
我想在這個網站上獲得這種效果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>
我只知道導航固定在頂部,但是我想動畫化並加載較小版本的徽標。
有什么建議么?
他們在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;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.