带有JavaScript的粘性侧栏-仅在指定元素之前保持粘性

我想创建一个有粘性的边栏。但是粘滞的边栏应该一直粘着，直到边栏的结尾到达指定的元素为止

这是我想使用侧边栏的网页：

您可以在标题部分或此处看到代码

<script>
    var sidebar = $('#sidebar-content'),
        nav = $('.sidebar-content'),
        startPosition = sidebar .offset().top,
        stopPosition = $('#abspann').offset().top - nav.outerHeight();

    $(document).scroll(function () {
        //stick nav to top of page 
        var y = $(this).scrollTop()

        if (y > startPosition) {
            nav.addClass('sticky');
            if (y > stopPosition) {
                nav.css('top', stopPosition - y);
            } else {
                nav.css('top', 0);
            }
        } else {
            nav.removeClass('sticky');
        } 
    });
</script>

var边栏=$（“#边栏内容”），
导航=$（“.侧栏内容”），
startPosition=sidebar.offset（）.top，
停止位置=$（'#abspann'）.offset（）.top-nav.outerHeight（）；
$（文档）。滚动（函数（）{
//将导航粘贴到页面顶部
var y=$（this.scrollTop（））
如果（y>起始位置）{
资产净值增加类（“粘性”）；
如果（y>停止位置）{
导航css（“顶部”，停止位置-y）；
}否则{
导航css（“顶部”，0）；
}
}否则{
导航移除类（“粘性”）；
} 
});

如果用户向下滚动，我希望侧边栏连接到屏幕上，如果侧边栏的结尾已到达元素

#abspann

，则侧边栏应结束

但我的代码中有一个错误：

uncaughttypeerror:$不是位于（索引）415的函数

我怎样才能让它工作

我找到了源代码

问候语
无法添加评论，因此将其作为答案发布。在上面的代码中尝试用jQuery替换$。希望它能解决这个错误。
我认为这会奏效

<script>
    var nav = $('.sidebar-content'),
        startPosition = nav.offset().top,
        stopPosition = $('#abspann').offset().top - $(window).height();

    $(document).scroll(function () {
        //stick nav to top of page 
        var y = $(this).scrollTop()

        if (y > startPosition) {
            nav.addClass('sticky');
            if (y > stopPosition) {
                nav.css('top', stopPosition - y);
            } else {
                nav.css('top', 0);
            }
        } else {
            nav.removeClass('sticky');
        } 
    });
</script>


var nav=$（'.sidebar content'），
startPosition=nav.offset（）.top，
停止位置=$（'#abspann'）.offset（）.top-$（窗口）.height（）；
$（文档）。滚动（函数（）{
//将导航粘贴到页面顶部
var y=$（this.scrollTop（））
如果（y>起始位置）{
资产净值增加类（“粘性”）；
如果（y>停止位置）{
导航css（“顶部”，停止位置-y）；
}否则{
导航css（“顶部”，0）；
}
}否则{
导航移除类（“粘性”）；
} 
});

Style
sticky
根据您的需要分类
position:已修复
和您需要执行的其他调整。它正在你的网站上运行。我尝试过使用控制台。
首先，您必须用jQuery替换$，然后再试试这个

var sidebar = jQuery('#sidebar-wrap'),
    nav = jQuery('.sidebar-content'),
    startPosition = sidebar.offset().top,
    stopPosition = jQuery('#abspann').offset().top - nav.outerHeight();

jQuery(document).scroll(function () {
    //stick nav to top of page
    var y = jQuery(this).scrollTop()

    if (y > startPosition) {
        nav.addClass('sticky');
        if (y > stopPosition) {
            nav.css('top', stopPosition - y);
        } else {
            nav.css('top', 0);
        }
    } else {
        nav.removeClass('sticky');
    } 
});

您还必须在此处添加id

<div class="wpb_wrapper" id="sidebar-wrap">

jquery没有加载它，只是使用lib；）仍然不起作用…棍棒套件不起作用代码在上面！再次检查站点。。。我仍然得到“（索引）：407未捕获类型错误：无法读取未定义“@user7422244”的属性“top”你在开玩笑吗，你已经将-
#侧边栏包装
和
。侧边栏内容
放在同一个div中。请在.wpb#u包装器上使用
#侧边栏包装
，并按照此答案中的说明操作，或者试试我的答案，它正在你的网站上运行。我已经将
#侧边栏包装提高了两个级别，因为这是我可以用WordPress放置它的唯一地方。但它仍然不起作用。原因是，在我看来，我得到了以下错误：
（索引）：407未捕获类型错误：无法读取未定义的
@user7422244
（索引）：407未捕获类型错误：无法读取未定义的
的属性“top”-当jQuery无法找到具有
.offset（）的对象时，会发生此错误.top
你确定它在你的页面中吗。？我在你的网页中尝试了你的代码，它工作正常，因此在加载圆顶时出现了这个问题，你可以试试-
jQuery（“#侧边栏环绕”）.offset（）.top
它可能工作。
.sticky {
    position: fixed;
    top:0;
}