affix.js 3.57 KB
Newer Older
Jacob Thornton's avatar
Jacob Thornton committed
1
/* ==========================================================
fat's avatar
fat committed
2
 * Bootstrap: affix.js v3.0.0
Jacob Thornton's avatar
Jacob Thornton committed
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 * http://twitter.github.com/bootstrap/javascript.html#affix
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================== */


fat's avatar
fat committed
21
!function ($) { "use strict";
Jacob Thornton's avatar
Jacob Thornton committed
22

fat's avatar
fat committed
23
24
  // AFFIX CLASS DEFINITION
  // ======================
Jacob Thornton's avatar
Jacob Thornton committed
25
26

  var Affix = function (element, options) {
fat's avatar
fat committed
27
    this.options = $.extend({}, Affix.DEFAULTS, options)
28
    this.$window = $(window)
fat's avatar
fat committed
29
30
31
      .on('scroll.bs-affix.bs-data-api', $.proxy(this.checkPosition, this))
      .on('click.bs-affix.bs-data-api',  $.proxy(this.checkPositionWithEventLoop, this))

Jacob Thornton's avatar
Jacob Thornton committed
32
    this.$element = $(element)
fat's avatar
fat committed
33
34
35
    this.affixed  =
    this.unpin    = null

Jacob Thornton's avatar
stray ;    
Jacob Thornton committed
36
    this.checkPosition()
Jacob Thornton's avatar
Jacob Thornton committed
37
38
  }

fat's avatar
fat committed
39
40
41
42
43
44
45
46
  Affix.DEFAULTS = {
    offset: 0
  }

  Affix.prototype.checkPositionWithEventLoop = function () {
    setTimeout($.proxy(this.checkPosition, this), 1)
  }

Jacob Thornton's avatar
Jacob Thornton committed
47
48
49
  Affix.prototype.checkPosition = function () {
    if (!this.$element.is(':visible')) return

50
    var scrollHeight = $(document).height()
fat's avatar
fat committed
51
52
53
54
55
56
57
58
59
    var scrollTop    = this.$window.scrollTop()
    var position     = this.$element.offset()
    var offset       = this.options.offset
    var offsetTop    = offset.top
    var offsetBottom = offset.bottom
    var reset        = 'affix affix-top affix-bottom'

    if (typeof offset != 'object')         offsetBottom = offsetTop = offset
    if (typeof offsetTop == 'function')    offsetTop    = offset.top()
60
    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
Jacob Thornton's avatar
Jacob Thornton committed
61

fat's avatar
fat committed
62
63
64
    var 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
Jacob Thornton's avatar
Jacob Thornton committed
65

66
    if (this.affixed === affix) return
Jacob Thornton's avatar
Jacob Thornton committed
67
68

    this.affixed = affix
fat's avatar
fat committed
69
    this.unpin   = affix == 'bottom' ? position.top - scrollTop : null
Jacob Thornton's avatar
Jacob Thornton committed
70

71
    this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
Jacob Thornton's avatar
Jacob Thornton committed
72
73
74
  }


fat's avatar
fat committed
75
76
  // AFFIX PLUGIN DEFINITION
  // =======================
Jacob Thornton's avatar
Jacob Thornton committed
77

78
79
  var old = $.fn.affix

Jacob Thornton's avatar
Jacob Thornton committed
80
81
  $.fn.affix = function (option) {
    return this.each(function () {
fat's avatar
fat committed
82
83
84
85
86
      var $this   = $(this)
      var data    = $this.data('bs-affix')
      var options = typeof option == 'object' && option

      if (!data) $this.data('bs-affix', (data = new Affix(this, options)))
Jacob Thornton's avatar
Jacob Thornton committed
87
88
89
90
91
92
93
      if (typeof option == 'string') data[option]()
    })
  }

  $.fn.affix.Constructor = Affix


fat's avatar
fat committed
94
95
  // AFFIX NO CONFLICT
  // =================
96
97
98
99
100
101
102

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


fat's avatar
fat committed
103
104
  // AFFIX DATA-API
  // ==============
Jacob Thornton's avatar
Jacob Thornton committed
105

106
  $(window).on('load', function () {
Jacob Thornton's avatar
Jacob Thornton committed
107
108
    $('[data-spy="affix"]').each(function () {
      var $spy = $(this)
fat's avatar
fat committed
109
      var data = $spy.data()
110

Jacob Thornton's avatar
Jacob Thornton committed
111
112
      data.offset = data.offset || {}

fat's avatar
fat committed
113
114
      if (data.offsetBottom) data.offset.bottom = data.offsetBottom
      if (data.offsetTop)    data.offset.top    = data.offsetTop
Jacob Thornton's avatar
Jacob Thornton committed
115
116
117
118
119

      $spy.affix(data)
    })
  })

120
}(window.jQuery);