jQuery Navbar li align center on scroll

Question

オフセットが100pxの.affixクラスを使用するBootstrap Navbarがあります。デフォルトでは、ナビゲーションバーのリストアイテムはバーの中央に配置されます。 .affixクラスがトリガーされると、jQueryは左側のナビゲーションバーにnavbar-brandを表示し、右側にリスト項目をプッシュします。 100pxの範囲内でスクロールすると、navbarのブランドは消え、リスト項目は中心に戻りますが、中心からやや戻ります。私は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で実際に起こっているが、それは中心からほんの少し離れているので、それほど目立たない。

問題は、私がnavbarブランドを500ms以上フェードアウトすることですが、navbar-navのセンタリングはすぐに起こっています。 navbar-navはできるだけ中央に到達し、その後、まだフェードアウトしていないnavbar-brandに衝突し、停止します。

私は（.hideするjQueryのを変更した場合）、それが正常に動作します：

$(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'); 
    } 
    }); 
});