Semantic-UI sticky tab menu bug - semantic-ui

Question

It only takes in consideration the height of the first tab and for the rest of the tabs it automatically sticks the content to the bottom.
<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>
Here i called the tab
$('.menu .item')
.tab()
;
Here i initialize ui sticky
$('.ui.sticky')
.sticky({
context: '#railContent',
observeChanges: true,
})
.sticky('refresh')
;
Here is a jsfiddle:
https://jsfiddle.net/efpyhqq9/15/

Answer 1

I was having the same issue, based on your try I came with a solution, refresh the sticky every time a tab end the loading and become fully visible.
$('.ui.sticky').sticky({
context: '.railContent',
});
$('.menu .item').tab({
onVisible() {
$('.ui.sticky').sticky('refresh');
}
});
I've forked your fiddle with this solution.
https://jsfiddle.net/arthurvasconcelos/pmyg0yL0/
Thanks for the idea.

Answer 2

Since your tab contents don't have the same height, you need to refresh your rail every time your tab content is loaded. Below is a sample code that works for your situation.
$('.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>
Note: This is also true to visibility where a refresh is needed every time the DOM height is changed dynamically.