Jquery语句崩溃

当目标值为true时，我使用jquery来制作数字动画。但当值为true甚至为false时，我的导航jquery-else语句代码会因为某种原因停止工作，我不知道为什么。我想我在这两个语句中都使用了"offset"。

我的html动画数字

 <div class="container" id="counter">
    <div class="row text-center">
      <div class="col-lg-12">
        <h3 class="dark-blue">SOME FACTS ABOUT US WHAT WE ARE</h3>
      </div>
       <div class="col-lg-12 top-spacing">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tellus a nulla rhoncus imperdiet.<br/> Vestibulum quis dictum leo.Curabitur viverra sagittis velit non fringilla. Etiam sed fringilla risus, vel dapibus nisi.</p>
      </div>
    </div>
    <div class="row text-center content top-spacing">
      <div class="col-lg-3">
        <i class="fa fa-bicycle fa-5x color-red"></i>
        <h3 id="bike" class="countdown">0</h3>
        <h3 class="blog-item">Km ride bike</h3>
      </div>
      <div class="col-lg-3">
        <i class="fa fa-coffee fa-5x color-red"></i>
        <h3 id="coffee" class="countdown">0</h3>
        <h3 class="blog-item">Cups of coffee</h3>
      </div>
      <div class="col-lg-3">
        <i class="fa fa-line-chart fa-5x color-red"></i>
        <h3 id="projects" class="countdown">0</h3>
        <h3 class="blog-item">Projects Completed</h3>
      </div>
      <div class="col-lg-3">
        <i class="fa fa-user fa-5x color-red"></i>
        <h3 id="users" class="countdown">0</h3>
        <h3 class="blog-item">Users Satisfied</h3>
      </div>
    </div><br/><br/><br/>
  </div>

动画数字的Js

var target = $("#counter").offset().top-$(window).height();
$(document).on('scroll', function() {
    if ($(window).scrollTop() > target) {
        $('#bike').animateNumber({ number: 165 },5000);
        $('#coffee').animateNumber({ number: 2165 },5000);
        $('#projects').animateNumber({ number: 385 },5000);
        $('#users').animateNumber({ number: 315 },5000);
        $(this).off('scroll');
    }
});

我的导航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" href="#">Aston</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Team</a></li> 
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li> 
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

Jquery 的CSS

.navbar-default.scrolled{
  background-color: #fff;
  border-bottom: 1px solid #BBB9BE;
  box-shadow: 0,0,2px,#BBB9BE;
}
.navbar-default {
  background-color: transparent;
  border:none;
  -webkit-transition: background-color 700ms linear;
  -moz-transition: background-color 700ms linear;
  -o-transition: background-color 700ms linear;
  -ms-transition: background-color 700ms linear;
  transition: background-color 700ms linear;
}

导航的JS

  var a = $(".navbar-default").offset().top;
  $(document).scroll(function() {
   if ($(this).scrollTop() > 10) {
    $('.navbar-default').addClass("scrolled");
    $(".navbar-default .navbar-brand").css({
        "color": "#3F4474"
    });
    $(".navbar-default .navbar-toggle .icon-bar").css({
        "background-color": "#3F4474"
    });
   }
   else {
    $('.navbar-default').removeClass("scrolled");
    $(".navbar-default .navbar-brand").css({
        "color": "#fff"
    });
    $(".navbar-default .navbar-toggle .icon-bar").css({
        "background-color": "#fff"
    });
  }
 });

我只是想让导航回到它的原始位置，背景颜色是透明的。谢谢你的帮助！