最近做了一个企业网站，右侧自动加载一个导航浮动层，随着网页上下滚动到某些模块，自动添加右侧导航栏对应项目的浮动效果。

刚开始自己做了一段JS代码，但是要在每个使用的页面复制同样的代码的话，代码量也比较大了。所以准备自己做一个右侧面板滚动插件。特将编写过程写出来，第一次写jquery插件，轻拍..

演示地址：http://songker.com/Code/plugin/rightpanel.html

插件需要用到某些扩展方法，我写成了全局方法：

//扩展方法 格式化

$.format = function (source, params) {
    if (arguments.length == 1)
        return function () {
            var args = $.makeArray(arguments);
            args.unshift(source);
            return $.format.apply(this, args);
        };
    if (arguments.length > 2 && params.constructor != Array) {
        params = $.makeArray(arguments).slice(1);
    }
    if (params.constructor != Array) {
        params = [params];
    }
    $.each(params, function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
    });
    return source;
};
// 元素是否在窗口内
$.inWindow = function ($el) {
    var wHeight = $(window).height();
    var bTop = $('body').scrollTop() || $('html').scrollTop();
    var eTop = $el.offset().top + 100;
    return wHeight + bTop > eTop && bTop < eTop;
};

这些扩展方法其它地方也可能用到，所以我写的是jquery全局函数，可以用$.inWindow 等方式调用全局方法。

开发的jquery插件，(function ($) {   /* code */   })(jQuery);  使用对象级别的插件开发。代码如下：

(function ($) {
    var RightPanel = function (that, options) {
        this.opts = $.extend({
            _panelclass: "backpanel-inner"
        }, options);
        this.$o = $(that);      
        this.init();
        this.scrolling(this.$o);
        this.bindclick(this.$o);
    };
    RightPanel.prototype = {
        init: function () {
            var items = $("div[data-fid]"), appendHtml = "";
            appendHtml += $.format('<div class="{0}">', this.opts._panelclass);
            items.each(function () {
                var i = $(this).data("fid"), title = $(this).data("title");
                appendHtml += $.format('<div class="bp-item bp-item-floor-links floor-fore{0}" data-top="{0}">', i);
                appendHtml += $.format('    <a href="#none" class="floor-links floor-fore{0}" target="_self">{1}</a><span>{0}F</span><s></s>', i, title);
                appendHtml += "</div>";
            });
            appendHtml += '<div class="bp-item bp-item-backtop">    <a href="#" class="backtop" target="_self">返回顶部</a><span></span><s></s></div>';
            appendHtml += '<p class="foll-hd">顾陌博客<br>songker.com</p></div>';
            this.$o.html(appendHtml);
        },
        scrolling: function ($panel) {
            $(window).bind('scroll', function () {
                var panelBox = $panel.children(":first");
                var scrollTop = $(document).scrollTop();
                if (scrollTop > 80) panelBox.css("display", "block");
                else panelBox.css("display", "none");
                $("div[data-fid]").each(function () {
                    var i = $(this).attr("data-fid");
                    if ($.inWindow($(this))) {
                        panelBox.find("div[data-top='" + i + "']").addClass("curr").find("a").addClass("curr");
                    }
                    else {
                        panelBox.find("div[data-top='" + i + "']").removeClass("curr").find("a").removeClass("curr");
                    }
                });
            });
        },
        bindclick: function ($panel) {
            var panelBox = $panel.children(":first");
            panelBox.find("div[data-top]").click(function () {
                var i = $(this).data("top");
                var len = $("div[data-fid='" + i + "']").offset().top;
                $("body,html").animate({ scrollTop: len }, 500);
                return false;
            });
        }
    };
    $.fn.RightPanel = function (options) {
        var plugin = new RightPanel(this, options);
    };
})(jQuery);

上面的代码写了一个RightPanel 的对象，类似于一个命名空间。$.fn.RightPanel的意义是可以通过$("element").RightPanel()的方式调用。

它包含三个执行方法，init、scrolling、bindclick。这三个方法对应的功能，Init 初始化传入的值以及生成展示的html，scrolling负责对窗体滚动事件做出相应响应，bindclick绑定点击事件。

在页面上调用该插件：

<div class="backpanel"></div>
<script type="text/javascript">
    $(function () { $(".backpanel").RightPanel({});});
</script>

在页面需要导航的元素上添加属性， data-fid="0" data-title="显示标题"。data-fid是展示的序号， data-title是右侧显示的标题。