粘性侧边栏 - 在元素处停止？

Question

我想要一个棒状站点栏。我搜索并找到了这段代码：

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

问题是它不起作用...我已经尝试用jQuery 替换$ 但仍然...不起作用。唯一的原因可能是我仍然在控制台中遇到的错误：

未捕获的类型错误：无法读取 undefinedat 的属性“顶部” (索引):411

目前的代码是这样的：

<script>
var sidebar = jQuery('#sidebar-wrap'),
    nav = jQuery('.sidebar-content'),
    startPosition = jQuery('#sidebar-wrap').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');
    } 
});
</script>

如果它正常工作，侧边栏应该停在元素#abspann。想知道。

我所说的网站是this。并且源码可以在here找到。

我怎样才能让它工作？

亲切的问候

Answer 1

这是因为您的脚本是在加载元素之前加载的，因此请使用$.ready()，以便每个元素在使用之前都可用。

<script src="JQUERY_LIB_URL_HERE"></script>
<script>
    jQuery(function(){
       var sidebar = jQuery('#sidebar-wrap'),
        nav = jQuery('.sidebar-content'),
        startPosition = jQuery('#sidebar-wrap').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');
            } 
        });
    });
</script>