添加側邊欄位置不會改變

我在使用Bootstra Affix插件時遇到了一些麻煩。我希望我的附加菜單被粘貼，但始終保留在標題下方和文檔頁腳的上方，所以我使用了data-offset-top和data-offset-bottom HTML5數據屬性來使菜單遠離兩者。添加側邊欄位置不會改變

這一切都正常工作，直到我滾動頁面到底部，此時菜單跳回頂部，不再粘貼。一旦向下滾動頁面，菜單將保持在頁腳之上（這是正確的）。但是當滾動回來時，它跳到頂部並停留在那裏。

這是CodePen。這怎麼解決？

編輯：

一些調試後，我注意到這個問題似乎正在達到可能與affix-bottom和正在應用的position:relative風格。當向後滾動時，樣式重置爲此，位置不變。

是Bootstrap腳本中的某種功能還是bug？

來源

2016-11-16 Andrei Herford

我不是專家，但我相信你不必使用這兩個屬性，如果父元素在要避免碰撞的元素之前完成。 – Crowes

我不確定他是否正確。在我的示例中，父元素是在頁腳之前結束的「右列col-md-6」列。如果不使用'offset-bottom'選項，菜單隻會在頁腳上方滾動，而不會停在它之前。 –

我仍然不知道我在我的問題中描述的行爲是「預期功能」還是錯誤。但是我能夠通過以下解決方案來解決問題。

正如編輯我的問題所述，問題是由於position:relative在affix-bottom狀態下應用導致的，但在將包切換到affix狀態時未被刪除。所以我簡單地添加了一個事件處理程序，以便在切換到affix狀態時完全刪除所有內聯樣式。只需將以下代碼添加到在CodePen使用的JS：

$('.right_box').on('affixed.bs.affix', function() { 
    $this = $(this); 
    $this.removeAttr('style'); 
});

的時候當然沒有使用其他內嵌樣式這種解決方法應該只適用。

也許這個解決方案可能會幫助別人如何遇到同樣的問題。如果有一個真正的解決方案的問題，我會很高興知道它:)

來源

2016-11-17 06:18:27

添加側邊欄位置不會改變

回答

相關問題