javascript - 插件未按预期工作，可能存在 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。第一部分似乎粘贴得太晚，并且查看元素粘贴之前的元素偏移量，它看起来约为 250px。

任何帮助将不胜感激。

谢谢。

编辑 这是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);