Исправлена ​​ошибка меню tabantic tab-интерфейса с идентификационным номером

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') 
    .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 изменяется динамически.