affix.js 3.31 KB
Newer Older
1
/* ========================================================================
Mark Otto's avatar
Mark Otto committed
2
 * Bootstrap: affix.js v3.1.0
3
 * http://getbootstrap.com/javascript/#affix
4
 * ========================================================================
Zlatan Vasović's avatar
Zlatan Vasović committed
5
 * Copyright 2013 Twitter, Inc.
6
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
7
 * ======================================================================== */
Jacob Thornton's avatar
Jacob Thornton committed
8
9


XhmikosR's avatar
XhmikosR committed
10
+function ($) { 'use strict';
Jacob Thornton's avatar
Jacob Thornton committed
11

fat's avatar
fat committed
12
13
  // AFFIX CLASS DEFINITION
  // ======================
Jacob Thornton's avatar
Jacob Thornton committed
14
15

  var Affix = function (element, options) {
fat's avatar
fat committed
16
    this.options = $.extend({}, Affix.DEFAULTS, options)
17
    this.$window = $(window)
18
19
      .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
      .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))
fat's avatar
fat committed
20

Jacob Thornton's avatar
Jacob Thornton committed
21
    this.$element = $(element)
fat's avatar
fat committed
22
23
24
    this.affixed  =
    this.unpin    = null

Jacob Thornton's avatar
stray ;    
Jacob Thornton committed
25
    this.checkPosition()
Jacob Thornton's avatar
Jacob Thornton committed
26
27
  }

fat's avatar
fat committed
28
29
  Affix.RESET = 'affix affix-top affix-bottom'

fat's avatar
fat committed
30
31
32
33
34
35
36
37
  Affix.DEFAULTS = {
    offset: 0
  }

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

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

41
    var scrollHeight = $(document).height()
fat's avatar
fat committed
42
43
44
45
46
47
48
49
    var scrollTop    = this.$window.scrollTop()
    var position     = this.$element.offset()
    var offset       = this.options.offset
    var offsetTop    = offset.top
    var offsetBottom = offset.bottom

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

fat's avatar
fat committed
52
53
54
    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
55

56
    if (this.affixed === affix) return
fat's avatar
fat committed
57
    if (this.unpin) this.$element.css('top', '')
Jacob Thornton's avatar
Jacob Thornton committed
58
59

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

fat's avatar
fat committed
62
63
64
65
66
    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))

    if (affix == 'bottom') {
      this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
    }
Jacob Thornton's avatar
Jacob Thornton committed
67
68
69
  }


fat's avatar
fat committed
70
71
  // AFFIX PLUGIN DEFINITION
  // =======================
Jacob Thornton's avatar
Jacob Thornton committed
72

73
74
  var old = $.fn.affix

Jacob Thornton's avatar
Jacob Thornton committed
75
76
  $.fn.affix = function (option) {
    return this.each(function () {
fat's avatar
fat committed
77
      var $this   = $(this)
78
      var data    = $this.data('bs.affix')
fat's avatar
fat committed
79
80
      var options = typeof option == 'object' && option

81
      if (!data) $this.data('bs.affix', (data = new Affix(this, options)))
Jacob Thornton's avatar
Jacob Thornton committed
82
83
84
85
86
87
88
      if (typeof option == 'string') data[option]()
    })
  }

  $.fn.affix.Constructor = Affix


fat's avatar
fat committed
89
90
  // AFFIX NO CONFLICT
  // =================
91
92
93
94
95
96
97

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


fat's avatar
fat committed
98
99
  // AFFIX DATA-API
  // ==============
Jacob Thornton's avatar
Jacob Thornton committed
100

101
  $(window).on('load', function () {
Jacob Thornton's avatar
Jacob Thornton committed
102
103
    $('[data-spy="affix"]').each(function () {
      var $spy = $(this)
fat's avatar
fat committed
104
      var data = $spy.data()
105

Jacob Thornton's avatar
Jacob Thornton committed
106
107
      data.offset = data.offset || {}

fat's avatar
fat committed
108
109
      if (data.offsetBottom) data.offset.bottom = data.offsetBottom
      if (data.offsetTop)    data.offset.top    = data.offsetTop
Jacob Thornton's avatar
Jacob Thornton committed
110
111
112
113
114

      $spy.affix(data)
    })
  })

115
}(jQuery);