<td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
</tr>
+ <tr>
+ <td>target</td>
+ <td>selector | node | jQuery element</td>
+ <td>the <code>window</code> object</td>
+ <td>Specifies the target element of the affix.</td>
+ </tr>
+
</tbody>
</table>
</div><!-- /.table-responsive -->
var Affix = function (element, options) {
this.options = $.extend({}, Affix.DEFAULTS, options)
- this.$window = $(window)
+
+ this.$target = $(this.options.target)
.on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
.on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this))
Affix.RESET = 'affix affix-top affix-bottom'
Affix.DEFAULTS = {
- offset: 0
+ offset: 0,
+ target: window
}
Affix.prototype.getPinnedOffset = function () {
if (this.pinnedOffset) return this.pinnedOffset
this.$element.removeClass(Affix.RESET).addClass('affix')
- var scrollTop = this.$window.scrollTop()
+ var scrollTop = this.$target.scrollTop()
var position = this.$element.offset()
return (this.pinnedOffset = position.top - scrollTop)
}
if (!this.$element.is(':visible')) return
var scrollHeight = $(document).height()
- var scrollTop = this.$window.scrollTop()
+ var scrollTop = this.$target.scrollTop()
var position = this.$element.offset()
var offset = this.options.offset
var offsetTop = offset.top