插件无法正常运行，可能是Javascript / jQuery变量范围问题

Question

我使用发现的Codepen创建了一个基本插件，该插件允许在站点上显示“粘性”元素。

我之前没有写过插件，而且似乎对变量（var var_name，var $ var_name等）感到困惑，然后在引用它们时也感到困惑。 我觉得这种误解是导致插件出现问题的原因。

我有两个随页面滚动的元素，但是当它们到达其父对象的底部时停止。 效果很好，但是第一个元素到达后​​一个元素的偏移位置后，似乎会粘在父元素的底部。 因此，对我来说，似乎第二个元素的高度正用于计算第一个元素的位置。

下面是插件，我正在使用的两段代码启动插件。 我已经设置了一个jsfiddle，但是它带有一个未定义不是函数错误。

//Initiate plugin
$(window).load(function() {
    $('.section-1-pin').sticky({
        parent: '#section-1',
        main: '.section-1-sibling'
    });
    $('.section-2-pin').sticky({
        parent: '#section-2',
        main: '.section-2-sibling'
    });
});

//Plugin code in external file
(function($) {
    $.fn.sticky = function( options ) {

        return this.each(function() {
            var $this = $(this);

            options = options || {};

            var parent = options.parent;
            var $main = options.main;

            if( !$this.parent().is('.wrap') ) {
                $this.wrap( '<div class="wrap"></div>' );
            }

            $( '<div class="sticky-stop"></div>' ).insertAfter( parent );

            measureheight = function() {
                stickyHeight = $this.outerHeight();
                mainHeight = $(String($main)).outerHeight();
                var stickyStop = $(parent).next('.sticky-stop');
                console.log(stickyHeight);
                if ( (mainHeight - stickyHeight) > 0) {
                    $(parent).waypoint(function(direction) {
                        $(parent).toggleClass('sticky', direction === 'down');
                    });
                    $(stickyStop).waypoint(function(direction) {
                        $(parent).toggleClass('at-bottom', direction === 'down');
                    }, {
                        offset: function() {
                            return stickyHeight;
                        }
                    })
                } else {
                    $(parent).waypoint('destroy');
                }
            };

            $(window).resize(measureheight);

            measureheight();

        });

    };
})(jQuery);

问题似乎是stickyHeight变量。 在实际示例中，section-1的高度为341px，section-2的高度为246px。 第一部分似乎粘得太晚了，在元素粘贴之前先查看元素偏移量，看起来大约在250像素左右。

任何帮助将不胜感激。

谢谢。

编辑这里是http://jsfiddle.net/fn44qqjo/20/的链接

存在该问题并代表该问题，但是某些CSS没有声音，因此您会注意到粘性元素的大小发生了变化，等等，但这很好。

Answer 1

问题是我在measureheight函数中的变量设置为全局变量。 将var放在前面以使其本地化已解决了该问题。 下面的新代码；

(function($) {
    $.fn.sticky = function( options ) {

        return this.each(function() {
            var $this = $(this);

            options = options || {};

            var parent = options.parent;
            var $main = options.main;

            if( !$this.parent().is('.wrap') ) {
                $this.wrap( '<div class="wrap"></div>' );
            }

            $( '<div class="sticky-stop"></div>' ).insertAfter( parent );

            measureheight = function() {
                //Changed these to local variables
                var stickyHeight = $this.outerHeight();
                var mainHeight = $(String($main)).outerHeight();
                var stickyStop = $(parent).next('.sticky-stop');

                if ( (mainHeight - stickyHeight) > 0) {
                    $(parent).waypoint(function(direction) {
                        $(parent).toggleClass('sticky', direction === 'down');
                    });
                    $(stickyStop).waypoint(function(direction) {
                        $(parent).toggleClass('at-bottom', direction === 'down');
                    }, {
                        offset: function() {
                            return stickyHeight;
                        }
                    })
                } else {
                    $(parent).waypoint('destroy');
                }
            };

            $(window).resize( measureheight() );

            measureheight()

        });

};
})(jQuery);