zepto.fix.js

/**
 * @file 实现了通用fix方法。
 * @name Fix
 * @import core/zepto.extend.js
 */

/**
 * @name fix
 * @grammar fix(options)   ⇒ self
 * @desc 固顶fix方法，对不支持position:fixed的设备上将元素position设为absolute，
 * 在每次scrollstop时根据opts参数设置当前显示的位置，类似fix效果。
 *
 * Options:
 * - ''top'' {Number}: 距离顶部的px值
 * - ''left'' {Number}: 距离左侧的px值
 * - ''bottom'' {Number}: 距离底部的px值
 * - ''right'' {Number}: 距离右侧的px值
 * @example
 * var div = $('div');
 * div.fix({top:0, left:0}); //将div固顶在左上角
 * div.fix({top:0, right:0}); //将div固顶在右上角
 * div.fix({bottom:0, left:0}); //将div固顶在左下角
 * div.fix({bottom:0, right:0}); //将div固顶在右下角
 *
 */

(function ($, undefined) {
    $.extend($.fn, {
        fix: function(opts) {
            var me = this;                      //如果一个集合中的第一元素已fix，则认为这个集合的所有元素已fix，
            if(me.attr('isFixed')) return me;   //这样在操作时就可以针对集合进行操作，不必单独绑事件去操作
            me.css(opts).css('position', 'fixed').attr('isFixed', true);
            setTimeout(function() {
                var buff = $('<div style="position:fixed;top:10px;"></div>').appendTo('body'),
                    top = buff.offset(true).top,
                    checkFixed = function() {
                        if(window.pageYOffset > 0) {
                            if(buff.offset(true).top !== top) {
                                me.css('position', 'absolute');
                                doFixed();
                                $(document).on('scrollStop', doFixed);
                                $(window).on('ortchange', doFixed);
                            }
                            $(document).off('scrollStop', checkFixed);
                            buff.remove();
                        }
                    },
                    doFixed = function() {
                        me.css({
                            top: window.pageYOffset + (opts.bottom !== undefined ? window.innerHeight - me.height() - opts.bottom : (opts.top ||0)),
                            left: opts.right !== undefined ? document.body.offsetWidth - me.width() - opts.right : (opts.left || 0)
                        });
                        opts.width == '100%' && me.css('width', document.body.offsetWidth);
                    };
                $(document).on('scrollStop', checkFixed);
            }, 300);
            return me;
        }
    });
}(Zepto));