Javascript 具有相对高度和流体绝对过渡的固定侧栏

我希望实现一个固定的侧边栏，它将滚动到div的底部，然后将变成一个绝对定位的元素，以阻止它继续向下页面

向上滚动时，侧边栏将返回到固定位置。侧边栏需要继承与其旁边的列相同的高度，以使固定侧边栏看起来不奇怪。调整屏幕大小时，侧边栏的大小需要改变，以便与列匹配

到目前为止，我已经能够：

• 生成继承列高度并将其应用于div的代码
• 使重新计算窗口高度的代码调整大小
• 将更改定位的代码设置为“固定->绝对”，反之亦然

我已经编写了代码，用于计算div应滚动的距离，但这是我遇到问题的地方：

• 我需要它来更新它相对于窗口大小调整边栏的滚动距离（我想这意味着只需在调整大小窗口内再次运行脚本，我不太确定）
• 它应该滚动多远的计算是相对于用户浏览器的高度，因此在15英寸的屏幕上滚动到正确的点时，与23英寸的屏幕相比，不会滚动到正确的点

我正在寻找一些帮助，使脚本计算的距离，它应该滚动火调整大小，以及为了创造一个无缝的体验

以及一些帮助，以找出要使用的正确公式，使其正确显示在浏览器窗口的所有实例中

Javascript

    $(document).ready(function() {

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

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

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

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

HTML

---

我通过编辑用于计算滚动距离的代码对此进行了修改：

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= offsetHeight - 100) {
        $('.sidebar-wrap').addClass('scroll');
    } else {
        $('.sidebar-wrap').removeClass('scroll');
    }
});

因为我们已经知道离地高度等于边栏的高度，所以我把减法弄得一团糟，直到它变得流畅为止。如果要使用此代码，我相信您必须更改-100的值才能使其正常工作

编辑：我将其全部设置为1个函数，并启用了在调整窗口大小时更新所有内容的功能，该功能也仅在调整完成后启动。

<script type="text/javascript">

$(document).ready(function() {

    function updateScroll() {

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

        $(window).bind('scroll', function() {
            if($(window).scrollTop() >= offsetHeight - 100) {
                $('.sidebar-wrap').addClass('scroll');
            } else {
                $('.sidebar-wrap').removeClass('scroll');
            }
        });
    }

        $(window).resize(updateScroll).trigger('resize')
    });
</script>

$（文档）.ready（函数（）{
函数updateScroll（）{
var offsetHeight=document.getElementById（'main-column'）。offsetHeight；
document.getElementById（'main-sidebar'）。style.height=offsetHeight+'px'；
$（窗口）.bind（'scroll'，function（）{
如果（$（窗口）.scrollTop（）>=离视-100）{
$（'.sidebar wrap'）.addClass（'scroll'）；
}否则{
$（'.sidebar wrap'）.removeClass（'scroll'）；
}
});
}
$（窗口）.resize（更新滚动）.trigger（'resize'）
});

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= offsetHeight - 100) {
        $('.sidebar-wrap').addClass('scroll');
    } else {
        $('.sidebar-wrap').removeClass('scroll');
    }
});

<script type="text/javascript">

$(document).ready(function() {

    function updateScroll() {

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

        $(window).bind('scroll', function() {
            if($(window).scrollTop() >= offsetHeight - 100) {
                $('.sidebar-wrap').addClass('scroll');
            } else {
                $('.sidebar-wrap').removeClass('scroll');
            }
        });
    }

        $(window).resize(updateScroll).trigger('resize')
    });
</script>