Question

对我来说需要一些关于如何正确编写jquery插件的提示。

我从官方网站JQuery http://learn.jquery.com/plugins/basic-plugin-creation/

开始研究这个问题

我决定编写自己的粘贴式插件（我知道互联网上有各种各样的例子，我只需要编写函数的提示）

等等。我写了一个很好的简单函数。

function stickynav(el) {

        $(window).scroll(function () {
            if ( $(window).scrollTop() > 0 ) {
                $(el).css({position: 'fixed', top: '0px'});
                $(el).stop().animate({height : '40px',lineHeight : '40px'}, 200);
            } else {
                $(el).css({position: 'static'});
                $(el).stop().animate({height : '80px',lineHeight : '80px'}, 200);
            }

});

stickynav('nav');

在我决定尝试使用JQuery团队的建议编写相同的函数之后。

(function($){
  $.fn.stickynav = function(options){
    settings = $.extend({
      topSpacing: 0,
      initialHeight: '80px',
      resHeight: '40px'
    }, options);

    var $window = $(window)

    var scrolling = function(){
    $window.scroll(function(){
        if( $window.scrollTop() > settings.topSpacing ) {
            $(this).css({position: 'fixed', top: '0px'});
            $(this).stop().animate({height : settings.resHeight}, 200);
        } else {
            $(this).css({position: 'static'});
            $(this).stop().animate({height : settings.initialHeight}, 200);
        }
    });
    };
    return this.each(scrolling); 
 };
})(jQuery);

$('nav').stickynav();

结果有点困惑，我做错了什么。

请提供帮助，如果没有，则很难解释更改。

Answer 1

我看到的主要问题是你使用的$window.scroll功能this 但是this指的是那个环境中的窗口。

您需要存储对nav元素的引用，并使用该元素代替this。

所以整个var scrolling = ...应该成为

var scrolling = function(){
    var self = $(this);
    $window.scroll(function(){
        if( $window.scrollTop() > settings.topSpacing ) {
            self.css({position: 'fixed', top: '0px'});
            self.animate({height : settings.resHeight}, 200);
        } else {
            self.css({position: 'static'});
            self.animate({height : settings.initialHeight}, 200);
        }
    });
};

另一项改进是存储固定导航的当前状态，这样您就不会在每个滚动上执行动画，而只是在您想要更改状态时...

http://jsfiddle.net/gaby/ALDjx/2/

的演示代码

var scrolling = function () {
        var self = $(this);
        self.data('stickyState', false);

        $window.scroll(function () {
            var state = self.data('stickyState'),
                shouldBeFixed = $window.scrollTop() > settings.topSpacing;

            if (!state && shouldBeFixed) {
                self.css({
                    position: 'fixed',
                    top: '0px'
                }).animate({
                    height: settings.resHeight
                }, 200);
                self.data('stickyState', true);
            } else if (state && !shouldBeFixed) {
                self.css({
                    position: 'static'
                }).animate({
                    height: settings.initialHeight
                }, 200);
                self.data('stickyState', false);
            }
        });
    };

如何正确编写jquery插件

1 个答案: