語義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粘

$('.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'); 
    } 
}); 

我已經用這個解決方案分出你的小提琴。

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

感謝您的想法。

Answer 2

由於您標籤內容不具有相同的高度，你需要刷新你的每一個標籤的內容加載時間你鐵路。以下是適用於您的情況的示例代碼。

$('.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>

注：這也是千真萬確的知名度在需要刷新每次DOM高度動態變化的時間。