サイズ変更は私の高さ計算では機能していません

Question

私は一定のポイントに達すると絶対にスワップしてスクロールを止めてdivの下に残す固定サイドバーを使用しています。一旦上にスクロールすると、ページに固定されてスクロールされます。

サイドバーのサイズをリサイズ時のサイズに合わせて変更したいのですが、現在はページを更新して新しいカラムサイズを取得する必要があります。

JS

<script type="text/javascript"> 
$(document).ready(function() { 
var offsetHeight = document.getElementById('main-column').offsetHeight; 
document.getElementById('main-sidebar').style.height = offsetHeight+'px'; 

$(window).resize(function() { 
    var offsetHeight = document.getElementById('main-column').offsetHeight; 
    clearTimeout(this.id); 
}); 

$(window).bind('scroll', function() { 
    if($(window).scrollTop() >= 150 + $('#main-sidebar').offset().top + offsetHeight - window.innerHeight) { 
     $('.sidebar-wrap').addClass('scroll'); 
    } else { 
     $('.sidebar-wrap').removeClass('scroll'); 
    } 
}); 
}); 
</script> 

HTML

<div class="main-page"> 
    <div class="row-2col-left"> 
     <div class="column" id="main-column"> 
      <?php 
       if (function_exists('yoast_breadcrumb')) { 
        yoast_breadcrumb(' 
        <p id="breadcrumbs">','</p> 
        '); 
       } 
      ?> 
      <?php if (have_posts()) : 
       while (have_posts()) : 
        the_post(); 
        the_content(); 
       endwhile; 
      endif; ?> 
     </div> 
     <div class="sidebar" id="main-sidebar"> 
      <div class="sidebar-wrap" id="sidebar-wrap"> 
       <?php get_sidebar('sidebar-1'); ?> 
       <p>test</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

/* Sidebar Styles */ 
.wrap .main-page .row-2col-left .sidebar { 
position: relative; } 

.wrap .main-page .row-2col-left .sidebar .sidebar-wrap { 
position: fixed; } 

.wrap .main-page .row-2col-left .sidebar .sidebar-wrap.scroll { 
position: absolute; 
bottom: 0; } 

EDIT：このに興味がある人のために、私は負荷にして、両方のサイドバーのサイズを変更する機能を完了サイズ変更時に、サイドバーが必要とする位置の更新ロード時とサイズ変更時の両方でスクロールします。変数の更新

Fixed Sidebar with Relative height and Fluid Absolute Transitioning

Answer 1

はすでにその変数を使用するコードを変更しません。新しい高さを設定するには、コードを再度実行する必要があります。

function updateHeight() { 
    var offsetHeight = document.getElementById('main-column').offsetHeight; 
    document.getElementById('main-sidebar').style.height = offsetHeight+'px'; 
} 

$(window).resize(updateHeight).trigger('resize') 

// If you need the timeout logic 
// updateHeight() 
// $(window).resize(function() { 
//  updateHeight() 
//  clearTimeout(this.id); 
//  this.id = setTimeout(doneResizing, 500); 
// });