Question

我使用Codepen创建了一个基本插件，我发现它允许＆＃34;粘贴＆＃34;要在网站上显示的元素。

我以前没有写过插件，而且我似乎对变量（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变量。在现实世界中，示例部分-1的高度为341px，而部分-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);

插件不按预期工作，可能是Javascript / jQuery变量范围问题

1 个答案: