如何凍結第一列，同時水平滾動語義UI

-1

我有一個語義ui可堆疊兩列網格。我想在滾動時凍結左欄。我用我的網格創建了一個plunker。我想從Semantic使用粘性，但它不起作用。你有什麼想法如何解決這個問題？如何凍結第一列，同時水平滾動語義UI

<div class="ui stackable two column grid"> 
    <div class="column ui sticky"> 
    left 
    </div> 
    <div class=" column f-content">s 
    right 
    </div> 
</div>

來源

2017-04-04 J. Fox

它看起來像column和sticky正在發生衝突的類定義。從列中取出.ui .sticky並將其添加爲小孩。

$('.ui.sticky').sticky();

.f-content { 
 
    height: 1000px; 
 
    background: beige; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet"/> 
 

 
<div class="ui two column grid"> 
 
    <div class="column"> 
 
    <div class="ui sticky"> 
 
     Sticky 
 
    </div>  
 
    </div> 
 
    <div class="column f-content"> 
 
    Scrolling<br /> 
 
    Scrolling<br /> 
 
    Scrolling<br /> 
 
    Scrolling<br /> 
 
    Scrolling<br /> 
 
    Scrolling<br /> 
 
    Scrolling<br /> 
 
    Scrolling<br /> 
 
    Scrolling<br /> 
 
    Scrolling 
 
    </div> 
 
</div>

來源

2017-04-04 10:06:45

如何凍結第一列，同時水平滾動語義UI

回答

相關問題