插件未按预期工作，可能存在Javascript/jQuery变量范围问题

我已经用我找到的代码笔创建了一个基本插件，它允许在站点上显示粘性元素

我以前没有写过插件，我似乎对变量var-var\u name、var$var\u name等感到困惑，然后在引用它们时也感到困惑。我觉得这种误解导致了插件的问题

我有两个元素随页面滚动，但当它们到达父元素的底部时停止。这可以很好地工作，但是第一个元素到达下一个元素的偏移位置后，它似乎会粘在父元素的底部。所以在我看来，第二个元素的高度被用来计算第一个元素的位置

下面是插件和我正在使用的两位代码启动插件。我已经设置了一个JSFIDLE，但是它出现了一个未定义的错误，这不是一个函数错误

//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变量上。在实际示例中，截面1的高度为341px，截面2的高度为246px。第一部分看起来粘得太晚了，从元素粘之前的元素偏移量来看，它看起来约为250px

任何帮助都将不胜感激

多谢各位

编辑 这里有一个链接

---

这个问题是存在的，并且是问题的代表，但是一些CSS听起来不太好，所以你会注意到粘性元素改变大小等，但是这很好。

问题是我在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);

---

你能建立一个包含该问题演示的网站吗？很难想象到底是什么问题。是的，没关系。我会努力让它工作的。请容忍我几分钟。谢谢。我刚刚添加了jsfiddle的链接，谢谢。