Question

它只考虑第一个标签的高度，而其余的标签会自动将内容粘贴到底部。

var previousNumber: Int? // used in randomNumber()

func randomNumber() -> Int {
    var randomNumber = Int(arc4random_uniform(10))
    while previousNumber == randomNumber {
        randomNumber = Int(arc4random_uniform(10))
    }
    previousNumber = randomNumber
    return randomNumber
}

这里我称之为

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

这里我初始化ui sticky

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

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

Answer 1

我遇到了同样的问题，根据您的尝试，我提供了一个解决方案，每当标签结束加载并完全可见时刷新粘性。

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

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

我已经把这个解决方案分开了。

How to get millisecond and microsecond-resolution timestamps in Python

感谢您的想法。

Answer 2

由于标签内容的高度不同，因此每次加载标签内容时都需要刷新栏。以下是适合您情况的示例代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Semantic-UI粘性标签菜单错误

2 个答案: