タブ内のコンテンツの高さに基づいてコンテナdivの高さを再計算します

Question

左にスティッキーイメージのサイドバーがあり、異なる高さの右側にタブ付きのコンテンツがあるページがあります。私が実行している問題は、短いタブが選択されているときに、スティッキーサイドバーがコンテナをオーバーフローしていることです。

この現象は、タブ2をクリックしてページをスクロールすることで確認できます。左のイメージはフッターにオーバーフローしません。タブ1は正しい動作を示しています。ここ

は、コード例である：http://codepen.io/anon/pen/gayMjx

<section class="js-pin-container"> 
<div class="row"> 
    <div class="left-col"> 
    <div class="js-pin-content"> 
     <img src="http://placehold.it/250x250"> 
    </div> 
    </div> 
    <div class="right-col"> 
    <div id="tabs"> 
     <ul> 
     <li><a href="#tabs-1">tab 1</a></li> 
     <li><a href="#tabs-2">tab 2</a></li> 
     <li><a href="#tabs-3">tab 3</a></li> 
     </ul> 
     <div id="tabs-1"> 
     <p style="background: silver; height: 900px;">This dive is 900px tall.</p> 
     </div> 
     <div id="tabs-2"> 
     <p style="background: silver; height: 600px;">This dive is 600px tall.</p> 
     </div> 
     <div id="tabs-3"> 
     <p style="background: silver; height: 1200px;">This dive is 1200px tall.</p> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

私はwindow.resize()イベントを上げないことをお勧め毎回。

実際には、このイベントにいくつかの機能が追加されている可能性があり、各タブスイッチですべてを呼び出さないようにする必要があります。

高さを再計算するより良い方法は、プラグイン方式recalculateLimitsを公開することとactivateイベントに取り付けるます：

の作業例：メソッドを公開JSnippet Demo

：

 ... 
     $window.resize(function() { recalculateLimits(); }); 
     recalculateLimits(); 
     //This line expose the method 
     this.recalculateLimits = recalculateLimits; 
     $window.load(update); 

     return this; 
    }; 
})(jQuery); 

次に添付することができます：

$(function() { 

    //Attach pin: 
    var pinSide = $(".js-pin-content").pin({ 
     containerSelector: ".js-pin-container" 
    }); 
    //Create tabs: 
    $("#tabs").tabs({ 
     activate:function(){ 
      pinSide.recalculateLimits(); 
     } 
    }); 

}）;

Answer 2

問題は、ウィンドウのサイズが変更、しない場合、コンテナの内容が変更されたときにのみ、その限界（recalculateLimits）を更新pinあります。回避策を使用すると、新しいタブを開くたびにwindowサイズ変更イベントが発生します。

$("#tabs").tabs(); 

：：他の言葉では、あなたからtabsプラグインのあなたの初期設定を変更することができ

ここ

$("#tabs").tabs({ 
    activate:function(){ 
    $(window).resize(); 
    } 
}); 

あなたが行く：@piyin解答後http://codepen.io/anon/pen/OyYyag