调整大小不适用于我的高度计算

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; }

编辑：对于对此感兴趣的任何人，我完成了在加载和调整大小时调整侧边栏大小的功能，以及更新侧边栏在加载和调整大小时需要滚动多远的位置。

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);
// });