Question

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

我已尝试使用我在堆栈溢出时发现的一些解决方案，但我没有设法获得我想要的效果。

获得此效果

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

sudo apt install apparmor

我只是将导航固定在顶部，但我希望动画并加载较小版本的徽标。

有什么建议吗？

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

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

1 个答案: