如何冻结第一列，同时水平滚动语义UI

Question

我有一个语义ui可堆叠两列网格。我想在滚动时冻结左栏。 我用我的网格创建了一个plunker。我想从Semantic使用粘性，但它不起作用。你有什么想法如何解决这个问题？

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

Answer 1

它看起来像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>