语义-UI 粘性标签菜单错误

Question

它只考虑第一个选项卡的高度，对于其余选项卡，它会自动将内容粘贴到底部。

<div class="ui grid railContainer">

  <div class="four wide column ">

<div class="ui vertical fluid tabular menu sticky railMenu">
  <a class="item active" data-tab="first">
    TAB 1
  </a>
  <a class="item" data-tab="second">
    TAB 2
  </a>
  <a class="item" data-tab="third">
    TAB 3
  </a>
</div>

</div>

<div class="twelve wide stretched column" id="railContent">

 <div class="ui basic tab active" data-tab="first">
  <p>BEGIN tab 1</p>
  <div class="height"></div>
  <p>END</p>
</div>
<div class="ui basic tab" data-tab="second">
  <p>BEGIN tab 2</p>
  <div class="height first"></div>
  <p>it only sticks for the first height</p>
  <div class="height"></div>
  <p>END</p>
</div>
<div class="ui basic tab" data-tab="third">
  <p>BEGIN tab 3</p>
  <div class="height"></div>
  <br>
  <div class="height"></div>
  <br>
  <div class="height"></div>
  <p>END</p>
</div>

这里我调用了选项卡

$('.menu .item')
  .tab()
;

这里我初始化ui sticky

$('.ui.sticky')
  .sticky({
    context: '#railContent',
    observeChanges: true,
  })
  .sticky('refresh')
;

这是一个 jsfiddle： https://jsfiddle.net/efpyhqq9/15/

Answer 1

我遇到了同样的问题，根据你的尝试我提出了一个解决方案，每次标签结束加载并变得完全可见时刷新置顶贴。

$('.ui.sticky').sticky({
  context: '.railContent',
});

$('.menu .item').tab({
  onVisible() {
    $('.ui.sticky').sticky('refresh');
  }
});

我已经用这个解决方案分叉了你的 fiddle。

https://jsfiddle.net/arthurvasconcelos/pmyg0yL0/

谢谢你的想法。

Answer 2

由于您的 tab 内容不具有相同的高度，您需要在每次加载标签内容时刷新 rail .下面是适用于您的情况的示例代码。

$('.menu .item').tab({
    onLoad: function(){
         $('.ui.sticky').sticky('refresh');
    }
});


$('.ui.sticky')
   .sticky({
     context: '.railContent',
}).sticky('refresh');

.height {
  background-color: lightblue;
  height: 1000px;
}

.height.first {
  background-color: skyblue;
  height: 1000px;
}

.footer {
  background-color: gray;
  height: 600px;
  width: 100%;
}

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

<div class="ui grid railContainer">

  <div class="four wide column ">
  
    <div class="ui vertical fluid tabular menu sticky railMenu">
      <a class="item active" data-tab="first">
        TAB 1
      </a>
      <a class="item" data-tab="second">
        TAB 2
      </a>
      <a class="item" data-tab="third">
        TAB 3
      </a>
    </div>
    
  </div>
  
  <div class="twelve wide stretched column railContent">
  
    <div class="ui basic tab active" data-tab="first">
      <p>BEGIN</p>
      <p>works only for first tab</p>
      <div class="height first"></div>
      <p>END</p>
    </div>
    <div class="ui basic tab" data-tab="second">
      <p>BEGIN</p>
      <p><i class="green check icon"></i>now it works for this one</p>
      <div class="height first"></div>
      <p>it only sticks for the first height</p>
      <div class="height"></div>
      <p>END</p>
    </div>
    <div class="ui basic tab" data-tab="third">
      <p>BEGIN</p>
      <p><i class="green check icon"></i>same for this one</p>
      <div class="height"></div>
      <br>
      <div class="height"></div>
      <br>
      <div class="height"></div>
      <p>END</p>
    </div>

  </div>
  <div class="footer"></div>

</div>

注意：visibility 也是如此，每次动态更改 DOM 高度时都需要刷新。

语义-UI 粘性标签菜单错误

Semantic-UI sticky tab menu bug

semantic-ui