滾動引導貼div

我試圖在引導中創建一個固定的導航欄，它也允許我滾動它的內容時，它是在頁面之外。滾動引導貼div

硒這裏：http://www.bootply.com/T9x2m0FgmV

我差點它只是我不能讓滾動條可用於顯示導航欄「treemenu」正確的，當我滾動頁面的工作。

理想情況下，我希望邊欄貼到頂部，並且看起來完全像您在滾動滾動條之前一樣。現在它被衝高到其內容的寬度。基本上我希望它保留了col-lg-4

我試圖複製下面的CSS從引導至模擬天生的col-lg-4但只是讓一切變得更糟的所有屬性。

width: 33.33333333%; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px;

更新1：如果我添加類似：

.affix{ 
    top: 0px; 
    width: 19%; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
}

它看起來不錯，直到我讓頁面足夠小的引導，以嘗試把後對方的事情之一。當發生這種情況時，導航欄和內容會彼此重疊。

這看起來不是很吸引人：

更新2：只是增加像上面一％的寬度不工作的所有不同尺寸的瀏覽器..

來源

2016-08-11 JensB

您可以只添加$('#treemenu').width($('#treemenu').width());

然後你強制元素的寬度。

來源

2016-08-11 14:11:42

羅恩·範德黑伊登讓我的路到了一個解決方案上：

您可以只添加$（ '＃treemenu'）寬度（$（ '＃treemenu'）寬度（））。 ;

但是，當頁面被調整大小時，只需添加它不起作用，因爲這不會在初始加載後調整導航欄的大小。此外，我不能在重新調整大小後重新運行此代碼，因爲此時頁面可能會滾動，並且不會設置正確的寬度。

爲了處理大小調整，我在所有其他html下面創建了一個頁面基礎結構的副本。

<!-- used to get real position --> 
    <div class="row" id="shadowtreemenucontainer"> 
    <div class="col-sm-4"><div id="shadowtreemenu" class="well" style=></div></div> 
     <div class="col-sm-8"></div> 
    </div>

然後使用jQuery我可以調整的飛行導航欄的大小山坳-SM-4中的「隱藏」 shadowpage了。

function makeTreeNodeLookGood(){ 
    $('#shadowtreemenucontainer').show(1, function(){ 
    $('#treemenu').width($('#shadowtreemenu').width()); 
    }); 
    $('#shadowtreemenucontainer').hide(1); 

    setHeightOfNonScrolledView(); 
} 

function setHeightOfNonScrolledView(){ 
    $("#navTreeContainer").css({ 
     height: (($(window).height() -$("#navTreeContainer").offset().top + $(document).scrollTop())) + 'px' 
    }); 
} 

$(document).ready(makeTreeNodeLookGood); 
$(window).resize(makeTreeNodeLookGood); 

$(window).scroll(function() { 
    setHeightOfNonScrolledView(); 
});

我還說得那麼直到它是固定的，這樣它的高度隨着滾動，直到它需要整個高度固定在導航欄固定在屏幕的底部。

工作示例：http://www.bootply.com/ooU5nm7rcY

來源

2016-08-11 15:13:10 JensB

滾動引導貼div

回答

相關問題