Ruby's Louvre

每天学习一点点算法

导航

bootstrap源码学习与示例：bootstrap-affix

bootstrap在2.1新增的组件，直译过来就是固定。其实这组件很简单，就是通过添加或移除affix这个类名实现屏幕固定或不固定。当页面加载完毕时，JS插件会搜索页面上所有[data-spy="affix"]的元素，然后找其data-offset-top或data-offset-bottom属性，即离页面顶(底)部少于多少px，就放弃固定，平时你怎么滚动，被固定的元素都定在这个位置上不动。

此组件只要用户为元素定义两个属性，引入JS与CSS就生效了。用户基本不用写码。网上许多例子都是多此一举！

此组件也没有任何自定义事件！


!function ($) {

    "use strict"; // jshint ;_;


    /* AFFIX CLASS DEFINITION
  * ====================== */

    var Affix = function (element, options) {
        this.options = $.extend({}, $.fn.affix.defaults, options)
        this.$window = $(window)//只要是绑定事件
        .on('scroll.affix.data-api', $.proxy(this.checkPosition, this))
        .on('click.affix.data-api',  $.proxy(function () {
            setTimeout($.proxy(this.checkPosition, this), 1)
        }, this))//当我们移动或点击时自动进行修正
        this.$element = $(element)
        this.checkPosition()
    }

    Affix.prototype.checkPosition = function () {
        if (!this.$element.is(':visible')) return

        var scrollHeight = $(document).height()
        , scrollTop = this.$window.scrollTop()
        , position = this.$element.offset()
        , offset = this.options.offset
        , offsetBottom = offset.bottom
        , offsetTop = offset.top
        , reset = 'affix affix-top affix-bottom'
        , affix

        if (typeof offset != 'object') offsetBottom = offsetTop = offset
        if (typeof offsetTop == 'function') offsetTop = offset.top()
        if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
        //比较当前元素到顶部的距离与window.pageYOffset的差
        //通过affix-top affix-bottom这两个类名移除固定效果
        affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ?
        false    : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ?
        'bottom' : offsetTop != null && scrollTop <= offsetTop ?
        'top'    : false

        if (this.affixed === affix) return

        this.affixed = affix
        this.unpin = affix == 'bottom' ? position.top - scrollTop : null

        this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
    }


    /* AFFIX PLUGIN DEFINITION
  * ======================= */

    var old = $.fn.affix

    $.fn.affix = function (option) {
        return this.each(function () {
            var $this = $(this)
            , data = $this.data('affix')
            , options = typeof option == 'object' && option
            if (!data) $this.data('affix', (data = new Affix(this, options)))
            if (typeof option == 'string') data[option]()//这里是无效的,因为它只有一个checkPosition方法,而这方法会自动调用
        })
    }

    $.fn.affix.Constructor = Affix

    $.fn.affix.defaults = {
        offset: 0
    }


    /* AFFIX NO CONFLICT
  * ================= */

    $.fn.affix.noConflict = function () {
        $.fn.affix = old
        return this
    }


    /* AFFIX DATA-API
  * ============== */

    $(window).on('load', function () {
        //取得页面上所有带[data-spy="affix"]的元素,它此外还有个像data-offset-top=50 data-offset-bottom=10的属性
        $('[data-spy="affix"]').each(function () {
            var $spy = $(this)
            , data = $spy.data()

            data.offset = data.offset || {}//在其缓存对象上开辟一个空间
            //放入差值
            data.offsetBottom && (data.offset.bottom = data.offsetBottom)
            data.offsetTop && (data.offset.top = data.offsetTop)

            $spy.affix(data)
        })
    })


}(window.jQuery);

posted on 2012-12-24 23:18  司徒正美  阅读(8594)  评论(4)    收藏  举报