如何用jQuery实现Blogger右侧粘性侧边栏 滚动至footer处停止

• 页面滚动未超过侧边栏初始位置时，侧边栏保持原有文档流布局
• 滚动超过侧边栏初始位置后，侧边栏固定在视口右侧顶部，可自定义顶部间距
• 滚动至页脚区域时，侧边栏自动停止上移，不会覆盖或超出页脚范围

以下是优化后的完整可直接使用代码：

<!-- 引入jQuery，已改为HTTPS协议适配Blogger HTTPS站点 -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
    $(function() {
        // 侧边栏元素选择器，可替换为你实际的侧边栏类名/ID
        var $sidebar = $(".column-right-inner");
        // 页脚元素选择器，可替换为你实际的页脚类名/ID
        var $footer = $(".footer");
        // 侧边栏固定后距离视口顶部的间距，单位px
        var topPadding = 15;
        // 侧边栏距离页脚的预留间距，单位px
        var bottomGap = 20;
        // 侧边栏初始位置偏移量
        var offset = $sidebar.offset();
        // 侧边栏自身高度
        var sidebarHeight = $sidebar.outerHeight();

        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();
            // 计算页脚顶部距离文档顶部的位置
            var footerTop = $footer.offset().top;
            // 计算侧边栏固定时的最大可滚动高度（避免超过页脚）
            var maxScrollTop = footerTop - sidebarHeight - topPadding - bottomGap;

            if (scrollTop > offset.top) {
                if (scrollTop < maxScrollTop) {
                    // 未到页脚区域，正常跟随滚动
                    $sidebar.stop().animate({
                        marginTop: scrollTop - offset.top + topPadding
                    });
                } else {
                    // 到达页脚区域，固定侧边栏位置不超出页脚
                    $sidebar.stop().animate({
                        marginTop: maxScrollTop - offset.top + topPadding
                    });
                }
            } else {
                // 未到侧边栏固定位置，恢复原始位置
                $sidebar.stop().animate({
                    marginTop: 0
                });
            }
        });
    });
</script>

使用注意事项：

• 请将代码中.column-right-inner替换为你博客右侧侧边栏对应的实际类名或ID
• 请将代码中.footer替换为你博客页脚对应的实际类名或ID
• 可根据需求调整topPadding、bottomGap的数值，自定义侧边栏的上下间距
• 若你的博客模板已经引入了jQuery，可删除代码中第一行的jQuery引入语句，避免重复加载

内容的提问来源于stack exchange，提问作者Junaid