fixes #11720 - Add events trigger to affix

dist/js/bootstrap.js

@@ -1826,8 +1826,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
     if (this.affixed == 'top') position.top += scrollTop
 
     if (typeof offset != 'object')         offsetBottom = offsetTop = offset
-    if (typeof offsetTop == 'function')    offsetTop    = offset.top()
+    if (typeof offsetTop == 'function')    offsetTop    = offset.top(this.$element)
-    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
+    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.$element)
 
     var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
                 offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
@@ -1836,10 +1836,20 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
     if (this.affixed === affix) return
     if (this.unpin) this.$element.css('top', '')
 
+    var affixType = 'affix' + (affix ? '-' + affix : '')
+    var e         = $.Event(affixType + '.bs.affix')
+
+    this.$element.trigger(e)
+
+    if (e.isDefaultPrevented()) return
+
     this.affixed = affix
     this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null
 
-    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))
+    this.$element
+      .removeClass(Affix.RESET)
+      .addClass(affixType)
+      .trigger($.Event(affixType.replace('affix', 'affixed')))
 
     if (affix == 'bottom') {
       this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })

js/affix.js

@@ -67,10 +67,20 @@
     if (this.affixed === affix) return
     if (this.unpin) this.$element.css('top', '')
 
+    var affixType = 'affix' + (affix ? '-' + affix : '')
+    var e         = $.Event(affixType + '.bs.affix')
+
+    this.$element.trigger(e)
+
+    if (e.isDefaultPrevented()) return
+
     this.affixed = affix
     this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null
 
-    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))
+    this.$element
+      .removeClass(Affix.RESET)
+      .addClass(affixType)
+      .trigger($.Event(affixType.replace('affix', 'affixed')))
 
     if (affix == 'bottom') {
       this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })

js/tests/unit/affix.js

@@ -22,4 +22,29 @@ $(function () {
         ok(!$affix.hasClass('affix'), 'affix class was not added')
       })
 
+      test('should trigger affixed event after affix', function () {
+        stop()
+
+        var template = $('<div id="affixTarget"><ul><li>Please affix</li><li>And unaffix</li></ul></div><div id="affixAfter" style="height: 20000px; display:block;"></div>')
+        template.appendTo('body')
+
+        var affixer = $('#affixTarget').affix({
+          offset: $('#affixTarget ul').position()
+        })
+
+        $('#affixTarget')
+          .on('affix.bs.affix', function (e) {
+            ok(true, 'affix event triggered')
+          }).on('affixed.bs.affix', function (e) {
+            ok(true,'affixed event triggered')
+            $('#affixTarget').remove()
+            $('#affixAfter').remove()
+            start()
+          })
+
+        setTimeout(function () {
+          window.scrollTo(0, document.body.scrollHeight)
+          setTimeout(function () { window.scroll(0,0) }, 0)
+        },0)
+      })
 })