转换效果不起作用jquery

Question

我正在创建一个导航栏，当滚动顶部大于10时我正在改变品牌的字体大小，如下所示。 我只是想让品牌字体大小变得平坦。 就像css3中的过渡一样。 有没有有效的方法呢???

 var a = $(".navbar-default").offset().top;
 $(document).on('scroll', function() {
  if ($(this).scrollTop() > 10) {
    $('.navbar-default').addClass("scrolled");
    $('.navbar-brand').css({"font-size":"20px"});
  } else {
    $('.navbar-default').removeClass("scrolled");
    $('.navbar-brand').css({"font-size":"26px"});
  }
});

HTML

   <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand-font-size navbar-brand scroll" href="#home">Shopify</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav text-center" style="position:relative;left:300px;">
          <li><a class="scroll" href="#about">Home</a></li>
          <li><a class="scroll" href="#portfolio">Accessories</a></li>
          <li><a class="scroll" href="#clients">Men</a></li>
          <li><a class="scroll" href="#team">Women</a></li> 
          <li><a class="scroll" href="#blog">FAQ's</a></li>
          <li><a class="scroll" href="#contact">Order Now</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right icons">
          <li class="icon-border"><a href="#"><i class="fa fa-search icons-size"></i></a></li>
          <li class="icon-border"><a href="#"><i class="fa fa-shopping-cart icons-size"></i></a></li>
          <li class="icon-border"><a href="#"><i class="fa fa-align-justify icons-size"></i></a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

Answer 1

你不需要像 CSS 一样动画，你可以使用CSS：

.navbar-brand{
    -webkit-transition: font-size 0.3s ease;
    -moz-transition: font-size 0.3s ease;
    -ms-transition: font-size 0.3s ease;
    -o-transition: font-size 0.3s ease;
    transition: font-size 0.3s ease;
}

Answer 2

我按照重要性做了两件事：

• 首先使用去抖功能来更频繁地调用更新功能，请参阅Ben Alman的一个http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce- js.html
• 进一步的优化是只更新css如果你正在改变状态，存储前一个值$(this).scrollTop() > 10比较。 如果不改变就什么都不做。

这些和使用css过渡使动画更流畅，如另一个答案所示，将使最终结果更美观。

Answer 3

您可以使用CSS来缩小字体大小。 尝试这个：

 $(window).scroll(function() { if ($(document).scrollTop() > 10) { $('nav').addClass('small'); } else { $('nav').removeClass('small'); } }); 

 nav { position: fixed; } button { font-size: 40px; transition: font-size 1s; } nav.small button { font-size: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <button>Home</button> <button>About</button> <button>Products</button> <button>Contact</button> </nav> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>