转换效果不起作用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来缩小字体大小。试试这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;