當它回到固定位置時使navbar生成動畫

Question

正如你所看到的，當你向下滾動時，我製作了一個粘貼到頁面頂部的導航欄，併成功地用一個技巧來動畫它。事情是我無法設置使其生動的時候，它回到頁面的頂部。我使用的引導3

HTML

<nav id="navigation" class="navbar-fixed-top"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-12" role="navigation"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" href="#"> 
          <img class="img-responsive" alt="Corex" src="images/logo.png"> 
         </a> 
        </div> 

        <div class="shopbar pull-right"> 
         <a data-toggle="collapse" href="#nav-shop" class="collapsed"> <i class="fa fa-lg fa-shopping-cart"></i> </a> 
         <a data-toggle="collapse" href="#search" class="collapsed"> <i class="fa fa-lg fa-search"></i> </a> 
        </div> 

        <div class="collapse navbar-collapse" id="navbar-collapse-1"> 

         <ul class="nav navbar-nav navbar-right"> 
          <li> 
           <div class="dropdown"> 
            <a data-toggle="dropdown" data-target="#" href="#" class="active"> Home <span class="main-text-color light">+</span> </a> 
            <ul class="dropdown-menu" role="menu"> 
             <li>home shop</li> 
             <li>home events</li> 
             <li>home paralax</li> 
             <li>home blog</li> 
             <li>home portfolio</li> 
             <li>home corporate : v1</li> 
             <li>home corporate : v2</li> 
             <li>home corporate : v3</li> 
             <li>home corporate : v4</li> 
             <li>home corporate : v5</li> 
             <li>home corporate : v6</li> 
             <li>create your own <i class="fa fa-play-circle-o"> </i> </li> 
            </ul> 
           </div> 
          </li> 
          <li> <a href="#"> Headers <span class="main-text-color light">+</span> </a> </li> 
          <li> <a data-toggle="collapse" href="#uber-menu-1" class="collapsed hover-menu" href="#"> Shortcodes <span class="main-text-color light">+</span> </a> </li> 
          <li> <a href="#"> Features <span class="main-text-color light">+</span> </a> </li> 
          <li> <a href="#"> Blog <span class="main-text-color light">+</span> </a> </li> 
          <li> <a href="#"> Portfolio <span class="main-text-color light">+</span> </a> </li> 
          <li> <a href="#"> Shop <span class="main-text-color light">+</span> </a> </li> 
          <li> <a href="#"> Events <span class="main-text-color light">+</span> </a> </li> 

         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </nav> 

CSS

#navigation.navbar-static-top { 
    transition: top 1s ease; 
    -webkit-transition: top 1s ease; 
    -moz-transition: top 1s ease; 
    -o-transition: top 1s ease; 
    -ms-transition: top 1s ease; 
    top: -200px; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

#navigation.navbar-fixed-top { 
    opacity: 0.95; 
    transition: top 1s ease; 
    -webkit-transition: top 1s ease; 
    -moz-transition: top 1s ease; 
    -o-transition: top 1s ease; 
    -ms-transition: top 1s ease; 
    top: 0; 
} 

#navigation a.navbar-brand { 
    line-height: 72px; 
    padding: 15px 0; 
} 

#navigation .navbar-brand img { 
    display: inline-block; 
} 

#navigation li { 
    display: inline-block; 
    line-height: 103px; 
} 

#navigation li a { 
    font-size: 13px; 
    font-weight: 500; 
    border-radius: 2px; 
    padding: 8px 5px 8px 14px; 
    display: inline-block; 
} 

#navigation a:hover { 
    text-decoration: none; 
} 

JAVASCRIPT

var offset = 220; 
var duration = 500; 
jQuery(window).scroll(function() { 
    if (jQuery(this).scrollTop() > offset) { 
     jQuery('#totop').removeClass('colapsed'); 
     jQuery('#navigation').addClass('navbar-fixed-top'); 
     jQuery('#navigation').removeClass('navbar-static-top'); 

     jQuery('#nav-shop').addClass('fixed-top'); 
     jQuery('#search').addClass('fixed-top'); 

    } else { 
     jQuery('#totop').addClass('colapsed'); 
     jQuery('#navigation').removeClass('navbar-fixed-top'); 
     jQuery('#navigation').addClass('navbar-static-top'); 

     jQuery('#nav-shop').removeClass('fixed-top'); 
     jQuery('#search').removeClass('fixed-top'); 
    } 
}); 

Answer 1

=== EDITED ===

極簡例如：http://jsfiddle.net/julienvignolles/xwNqu/

自舉，您的導航組件有2種狀態：

1. navbar-static-top：在流動（即。不是絕對/固定/相對）
2. navbar-fixed-top：帶有position: fixed和top: 0

動畫是從頂部滑動。我們只需要添加一個具有不同top值的類和transition: top 1s ease（我們可以用all替換top來爲其他屬性（如不透明等）設置動畫）。

在向上滾動時，我們刪除類navbar-fixed-top。導航欄不再是position: fixed，而是瞬間流入。所以，我們不能擁有隱藏的動畫。

的workarround是使用一個第三狀態，就像他們在your example做：

1. navbar-static-top（0和100像素從頂部之間滾動）：在流動
2. navbar-fixed-top（下100像素滾動）：我們固定導航欄，但我們沒有表現出來
3. navbar-move-down（220px下滾動）：我們展示了導航欄

注意：#navigation.navbar-static-top並不是必需的，在#navigation中重命名此規則會更簡單。

CSS

#navigation.navbar-fixed-top { 
    /* … */ 
    top: -100px; 
} 
#navigation.navbar-show-down { 
    top: 0; 
} 

JAVASCRIPT

var offset_stuck = 100; 
var offset_show_down = 220; 
jQuery(window).scroll(function() { 
    if (jQuery(this).scrollTop() > offset_stuck) { 
     jQuery('#navigation').addClass('navbar-fixed-top'); 
     jQuery('#navigation').removeClass('navbar-static-top'); 
     // … 
    } else { 
     jQuery('#navigation').removeClass('navbar-fixed-top'); 
     jQuery('#navigation').addClass('navbar-static-top'); 
     // … 
    } 
    if (jQuery(this).scrollTop() > offset_show_down) { 
     jQuery('#navigation').addClass('navbar-show-down'); 
    } else { 
     jQuery('#navigation').removeClass('navbar-show-down'); 
    } 
}); 

Answer 2

離題了！

當您使用navbar-fixed-top組件，您還需要墊您body（看大警告）：

http://getbootstrap.com/components/#navbar-fixed-top

CSS

​​

JAVASCRIPT

if (jQuery(this).scrollTop() > offset_stuck) { 
    jQuery('body').addClass('navbar-stuck'); 
    // … 
} else { 
    jQuery('body').removeClass('navbar-stuck'); 
    // … 
}