引導3詞綴插件點擊錯誤

Question

TL; DR：這是一個小提琴，點擊或滾動查看該bug：http://jsfiddle.net/Tetaxa/6cC9w/

我有兩列的頁面，右邊是一個貼DIV（工具欄）左邊是一些內容。當內容高於工具欄時，這很有用。但是，當工具欄較高時，我會遇到一些奇怪的行爲。在滾動並單擊時，工具欄的粘貼狀態會切換並且內容會摺疊。

下面是相關的HTML：

<div class="row"> 
    <div class="col-xs-8"> 
    <p>Lorem ipsum dolor</p> 
    </div> 
    <div class="col-xs-4"> 
     <div class="affixed-div"> 
      Affixed 
     </div> 
    </div> 
</div> 

這裏是我的JavaScript。計算底部以防止工具欄超出底部內容。

var div = $('.affixed-div'); 
var row = div.closest('.row'); 

div.affix({ 
    offset: { 
     bottom: $(document).height() - row.offset().top - row.height(), 
     top: div.offset().top 
    } 
}); 

而這裏的自定義CSS：

.affix { 
    top: 0; 
} 

.affix-bottom { 
    position: relative; 
} 

我錯了在這裏做什麼？它是一個錯誤還是按預期工作？我是否必須手動檢查行的高度，並且只在內容較高的情況下才粘貼工具欄，或者有更好的方法來避免它？我應該提交一份錯誤報告嗎？

Answer 1

這可能是引導錯誤。 即使現在也存在該錯誤。

bug是在引導插件Affix.js ，Affix.prototype.getState方法

if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false 

要修復它。替換爲下面的代碼。

if (offsetTop != null && this.affixed == 'top') return scrollTop <= offsetTop ? 'top' : false 

所有這一切都可以成爲我的一念之差

Answer 2

我有幾乎相同的錯誤。 類別詞綴正在被點擊類詞綴類替換。再次單擊並重新出現詞綴頂部。在我的情況下，它關係到貼底。

老的bug沒有真正解決還https://github.com/twbs/bootstrap/issues/4647#issuecomment-8769678

Answer 3

我覺得有一個條件檢查設置的地方貼上其切換狀態時，偏置爲零。只需更改一個像素的底部/頂部偏移量即可。在你的例子中，我改變了這樣的底部偏移：

bottom: $(document).height() - row.offset().top - row.height() - 1 

它開始工作正常。話雖如此，我不確定這是否是正確的解決方案。即使應用了這個技巧，我仍然有其他一些問題。 （滾動時導航器的閃爍）。

Answer 4

希望能解決您的問題。

var _toolbar = $('.toolbar'); 
    var _content = $('.content'); 
    _toolbar.on('affix.bs.affix', function() { 
     if (_toolbar.height() > _content.height()) { 
      return false; 
     } 
    }); 

注：affix.bs.affix立即此事件的元素已 被貼上了。

Answer 5

這個問題似乎只發生在窗口處於頂部滾動位置時。作爲一個詞綴只應有所作爲，一旦我們真的滾動我申請以下到我的導航欄（ID=nav，適應這導覽列）來解決這個問題：

$('#nav').on('affix.bs.affix', function(){ 
    if(!$(window).scrollTop()) return false; 
}); 

此檢查窗戶是否確實滾動。我正在從CDN加載引導文件，因此編輯原始文件不是一種選擇。

正如他的回答affix.bs.affix注意到@kolunar的元素前貼馬上還以顏色，這樣我們就可以防止這種情況發生時，我們沒有通過返回false