jQuery Navbar li 在滚动时对齐中心

Question

我有一个 Bootstrap 导航栏，它使用 .affix 类，偏移量为 100px。默认情况下，导航栏列表项在栏中居中。当触发 .affix 类时，我让 jQuery 在左侧的导航栏中显示 navbar-brand 并将列表项推到右侧。当您在 100px 内向上滚动时，导航栏品牌消失，列表项应该回到中心，但它们会稍微偏离中心。我创建了一个 codepen，但由于某种原因，它实际上在 codepen 中运行良好。

Codepen：http://codepen.io/Tambe257/pen/WwYoEO

如果我点击一个菜单项，它们就会居中，让我再次点击并点击链接。代码如下：

html:

<header>
<div class="container">
  <div class="header-info">
    <h1><span class="heavy">John Doe</span> Rosenthal</h1>
    <h2>Licensed Real Estate Salesperson</h2>
    <img src="img/coach-logo.png" alt="Logo">
  </div>
</div>
</header>

<!--     nav      -->
<div class="nav-wrapper">
 <nav class="navbar navbar-default" id="nav">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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" href="index.html">Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav" id="right-nav">
        <li><a href="#current-listings" class="page-scroll">Current Listings</a></li>
        <li><a href="sales.html" class="page-scroll">Sales Gallery</a></li>
        <li><a href="#about" class="page-scroll">About John Doe</a></li>
        <li><a href="#contact" class="page-scroll">Get In Touch</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav> 

CSS：

#nav.affix {
position: fixed;
top: 0;
width: 100%;
}

.navbar {
margin: 0;
background: $maroon;
@include border-radius(0px);
z-index: 5;

a {
  color: $white;
}

a.navbar-brand {
 display: none;
 font-family: $main-font;
 font-size: 24px;
 font-weight: 700;
 -webkit-transition: all 0s ease-in-out;
 -moz-transition: all 0s ease-in-out;
 transition: all 0s ease-in-out;
 }

 a.navbar-brand:hover {
 color: $white * 0.7;
 font-size: 24px;
 }

li {
 float: none;
display: inline-block;

a, a.page-scroll {
  color: $white;
  font-size: 1.6rem;

  &:visited, &:focus {
    color: $white;  
  }

  &:hover {
    color: $white * 0.7;
  }
 }
}

}

.navbar-default, .navbar-collapse {
 border: none;
}

.navbar-default .navbar-nav>li>a {
 color: $white;
 font-size: 1.6rem;

&:hover {
color: $white * 0.7;
}
}

.nav-wrapper {
 min-height: 50px;  
}

.navbar-default .navbar-brand, .navbar-default .navbar-brand:focus,     .navbar-default .navbar-brand:hover {
color: $white;
font-size: 1.6rem;

 &:hover {
 color: $white * 0.7;
}
}

.navbar-nav {
 float: none;
 text-align: center;
}

jQuery:

$('#nav').affix({


offset: {
    top: 100
  }
});

$(document).on('scroll', function() {
  $('#nav').each(function(){
    if($(this).hasClass('affix')) {
      $('.navbar-brand').fadeIn(500);
      $('#right-nav').addClass('navbar-right');
    } else {
      $('.navbar-brand').fadeOut(500);
      $('#right-nav').removeClass('navbar-right');
      $('navbar-nav').attr('float: none', 'text-align: center');
    }
  });
});

也许有更好的方法来编写 jQuery。同样，它在 codepen 中可以正常工作，但在任何浏览器中都不能。

Answer 1

好的，我找到了问题所在，而且比我预期的要容易。它实际上发生在我在上面发布的 Codepen 中，但它只是稍微偏离中心，所以它不那么明显。

问题是我正在淡出导航栏品牌超过 500 毫秒，但导航栏导航的居中立即发生。 navbar-nav 尽可能地到达中心，然后撞到 navbar-brand，它还没有完成淡出，然后停止。

如果我将 jQuery 更改为 .hide()，它可以正常工作：

$(document).on('scroll', function() {


$('#nav').each(function(){
    if($(this).hasClass('affix')) {
      $('.navbar-brand').fadeIn(500);
      $('#right-nav').addClass('navbar-right');
    } else {
      $('.navbar-brand').hide();
      $('#right-nav').removeClass('navbar-right');
      $('navbar-nav').attr('float: none', 'text-align: center');
    }
  });
});