使用twitter引導創建粘性導航欄？

我想介紹一個導航條，當不再在視圖中時，然後採用固定標題定位。我開始使用這個線程：Replicating Bootstraps main nav and subnav。使用twitter引導創建粘性導航欄？

問題：

錨鏈接將過沖其靶（在其中隱藏了目的地標題）每當導航欄處於其原始位置，而不是一旦它是固定的。我可以修復過沖（我提到http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/），但是當導航欄被固定時，我最終會使用鏈接的間隙過大。

任何人都可以建議如何獲得一致的結果，無論導航欄是固定的還是不固定的？

謝謝。

來源

2012-08-24 espanapin

這是你在找什麼？

<div class="navbar navbar-fixed-top">

來源

2012-08-24 18:06:42 guleryuz

我不知道這是如何回答這個問題。我已經在使用JavaScript動態添加這個類，並且它似乎是問題的根源。在導航到錨鏈接後添加此類會導致不一致的行爲。 – espanapin

對於navbar-fixed-top，您沒有任何CSS。另外，當您向後滾動時，您需要處理。

觀看演示 http://jsfiddle.net/yTqSc/39/

的JavaScript

$(document).scroll(function(){ 
var elem = $('.subnav'); 
if (!elem.attr('data-top')) { 
    if (elem.hasClass('navbar-fixed-top')) 
     return; 
    var offset = elem.offset() 
    elem.attr('data-top', offset.top); 
} 
if (elem.attr('data-top') <= $(this).scrollTop()) 
    elem.addClass('navbar-fixed-top'); 
else 
    elem.removeClass('navbar-fixed-top'); 
});

CSS

.subnav { 
    background:#FFF; 
} 
.navbar-fixed-top { 
    position:fixed; 
}

或者使用航點的jQuery插件來處理粘性元素。

來源

2013-04-05 22:47:25 steve

很高興，但我得到了瘋狂的落實上底部粘資產淨值，而不是頂部，這樣的：http://golkhaneh.tv3.ir/

如何能做到這一點？

來源

2013-10-29 15:14:32

使用twitter引導創建粘性導航欄？

回答

相關問題