頁面左側和右側的引導程序粘貼

這就是我的頁面結構。左柱（COL-LG-3）中心柱（COL-LG-6）右列（COL-LG-3）頁面左側和右側的引導程序粘貼

雖然我的主要內容是在中間一欄，我想我的左欄右列在固定的滾動位置後固定（或粘）。

我在互聯網上發現的大多數解決方案都是左邊一列粘滯。我認爲有一些JavaScript工作需要完成。請致電http://www.bootply.com/LiOE57ZlwI。到目前爲止，左列按照我希望的方式工作。我希望右欄的行爲與左欄相同。

也請訪問http://www.bootply.com/101100。我想要完全相同的行爲。我不想使用這段代碼，因爲它都是以低屏幕大小混亂的。

感謝

2015-02-05 Pushpan

而不是使用一個ID，使用類：

/* activate sidebar */ 
$('.sidebar').affix({ 
    offset: { 
    top: 235 
    } 
});

和在HTML中，不要在類

<div class="col-md-3" id="leftCol"> 
    <ul class="nav nav-stacked sidebar"> 
     <li><a href="#sec0">Section 0</a></li> 
     <li><a href="#sec1">Section 1</a></li> 
     <li><a href="#sec2">Section 2</a></li> 
     <li><a href="#sec3">Section 3</a></li> 
     <li><a href="#sec4">Section 4</a></li> 
    </ul> 
</div><!--/left--> 
<div class="col-md-3" id="leftCol"> 
    <ul class="nav nav-stacked sidebar"> 
     <li><a href="#sec0">Section 0</a></li> 
     <li><a href="#sec1">Section 1</a></li> 
     <li><a href="#sec2">Section 2</a></li> 
     <li><a href="#sec3">Section 3</a></li> 
     <li><a href="#sec4">Section 4</a></li> 
    </ul> 
</div><!--/right-->

使用ID，並把「側邊欄」和css也改成班級：

@media (min-width: 979px) { 
    .sidebar.affix-top { 
    position: static; 
    margin-top:30px; 
    width:228px; 
    } 

    .sidebar.affix { 
    position: fixed; 
    top:70px; 
    width:228px; 
    } 
} 

.sidebar li.active { 
    border:0 #eee solid; 
    border-right-width:5px; 
}

Demo here

來源

2015-02-05 23:43:30 Mindless

頁面左側和右側的引導程序粘貼

回答

相關問題