如何正确编写jquery插件

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

我从JQuery官方网站开始研究这个问题

我决定编写自己的StickyHeader插件（我知道互联网上有各种各样的例子，我只需要编写函数的技巧）

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

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();

结果有点混乱，我做错了什么

---

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

我看到的主要问题是在

$窗口内。滚动
您使用的
此功能

但是
此
指的是该上下文中的窗口

您需要存储对
nav
元素的引用，并使用该元素而不是
此

所以整个
var滚动=…
应该是

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);
        }
    });
};


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

演示代码在

DOM是否已加载？（也就是说，是
$（“nav”）.stickynav（）在
.ready
子句中吗？）当然：）都在$（document.ready（function（）{..}）中；结果是什么？什么叫“有点困惑”？代码做了什么？脚本不起作用，导航css没有改变你还可以说是好的网站或书籍，在那里我可以更好地理解编写jquery函数和插件？
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);
            }
        });
    };