Bootstrap 3 Navbar沒有正確轉換

Question

我一直在玩bootstrap 3，並且試圖創建一個導航條，它在滾動過去我的html的初始標題部分之後從頂部過渡。我快到了。我已經使用'詞綴'在滾動後成功添加了導航欄，並且在轉換過程中也取得了一些成功。不過，我仍然有2（我希望輕微）的問題。

1）過渡開始得太早。 （也就是說，在導航欄進入之前，我並沒有完全通過我的標題）

2）轉換沒有正常轉換，它只是彈出而不是動畫。

這裏是我寫的代碼：http://bootply.com/104811

誰能告訴我在哪裏，我已經錯了嗎？

任何幫助，將不勝感激，

謝謝！

Answer 1

DEMO

1）使用您的標題下方的元件來應用偏移詞綴，像您的容器。或者只是硬編碼像素數offset: { top: 100 }。

$('#nav').affix({ 
    offset: { top: $('#some-lower-element').offset().top } 
}); 

2）我想我想通這一個...

如果保持NAV可見（刪除visibility: hidden），與position: fixed和top: -50（正上方屏幕的頂部）transition仍滾動時工作。

#nav{ 
    position: fixed; 
    width: 100%; 
    top:-50px; 
    transition: top 1s; 
    -webkit-transition: top 1s; /* Safari */ 
}