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

我想获得的效果，改变标志，以更简单的版本，并有导航固定在顶部时，我向下滚动

我已经尝试了在堆栈溢出上找到的一些解决方案，但没有达到我想要的效果

我想在这个网站上得到这样的效果

这是我的代码（我正在使用WordPress和Bootstrap3）：

切换导航

我只得到我的导航是固定在顶部，但我想动画和加载较小版本的标志

---

有什么建议吗？

他们在dootrix网站上使用这个脚本。（jQuery）

因此，他们在标题中添加了一类滚动，然后通过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 -->  

---

嘿@TeeDeJee谢谢你的时间，但是jQuery似乎不起作用。有什么想法吗？@pevoje你能给我一个链接吗？当然可以，给我写封邮件dndme@hmamail.com，我会马上送你去。我不能粘贴在这里，因为该网站正在开发中，已被锁定，不公开。再次感谢

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

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

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