javascript - 无法读取未定义的属性 '$scrollElement'

Question

当我向下滚动页面时，此脚本的标题出现错误。我想要在部分导航菜单上有一个进度条。

当前代码:

(function($) {
    $(document).ready(function() {
        var $window = $(window),
        $body = $(document.body),
        $doc = $('.doc-container'),
        $nav = $doc.find ('.doc-nav');

        // make the document navigation affix when scroll
        $nav.affix({
            offset: {
                top: function () {
                    return 200; // replace with your top position to start affix
                },
                bottom: function () {
                    return 300; // replace your bottom position to release the affix
                }
            }
        });

        // change navigation active according to scroll
        $body.scrollspy({
            target: '.doc-sidebar'
        });

        // add progress bar for navigation
        $nav.find ('a').before ($('<span class="docs-progress-bar" />'));

        $nav.on ('activate activate.bs.scrollspy', function () {
            $body.scrollspy("refresh");
            var $active = $nav.find('li.active');
            $active.prevAll().find('.docs-progress-bar').css ('width', '100%');
            $active.nextAll().find('.docs-progress-bar').css ('width', '0%');
        });

        $window.on ('scroll', function (event) {
            if (this.timeout) {
                clearTimeout(this.timeout);
            }
            this.timeout = setTimeout (function () {
                var $active = $nav.find('li.active'),
                $progress = $active.find('.docs-progress-bar'),
                $scrollspy = $body.data('bs.scrollspy'),
                scrollTop    = $scrollspy.$scrollElement.scrollTop() + $scrollspy.options.offset,
                scrollHeight = $scrollspy.$scrollElement[0].scrollHeight || $scrollspy.$body[0].scrollHeight,
                maxScroll    = scrollHeight - $scrollspy.$scrollElement.height(),
                offsets      = $scrollspy.offsets,
                targets      = $scrollspy.targets,
                activeTarget = $scrollspy.activeTarget,
                i;

                if (scrollTop >= maxScroll) {
                    $progress.css ('width', '100%');
                    return ;
                }

                if (activeTarget && scrollTop <= offsets[0]) {
                    $progress.css ('width', '0%');
                    return ;
                }
                for (i = offsets.length; i--;) {
                    if (scrollTop >= offsets[i]
                    && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) {
                        var p1 = offsets[i],
                        p2 = scrollTop,
                        p3 = !offsets[i + 1] ? maxScroll : offsets[i + 1],
                        p = (p2-p1)/(p3-p1)*100;
                        $progress.css ('width', (p < 2 ? 2 : p) + '%');
                        return ;
                    }
                }
            }, 100);
        });
    });
})(jQuery);

错误在这一行:

scrollTop    = $scrollspy.$scrollElement.scrollTop() + $scrollspy.options.offset,

有什么解决这个问题的建议吗？

这里是演示链接:DEMO

Answer 1

您需要获取对 ScrollSpy 插件的引用:

$body.data('scrollspy')

代替:

$body.data('bs.scrollspy')

bs 前缀用于 Bootstrap 注册的自定义 Events，而不是数据。