如何在语义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并将其作为孩子添加。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;