Merge pull request #15154 from nickyod/affix-top-bug

2 files changed, 30 insertions, 1 deletions

diff --git a/js/affix.js b/js/affix.js
index deea29485..04f389e2c 100644
--- a/js/affix.js
+++ b/js/affix.js
@@ -53,7 +53,7 @@
     var colliderTop    = initializing ? scrollTop : position.top
     var colliderHeight = initializing ? targetHeight : height
 
-    if (offsetTop != null && colliderTop <= offsetTop) return 'top'
+    if (offsetTop != null && scrollTop <= offsetTop) return 'top'
     if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom'
 
     return false
diff --git a/js/tests/unit/affix.js b/js/tests/unit/affix.js
index ef6ef74b9..2e82a7dbf 100644
--- a/js/tests/unit/affix.js
+++ b/js/tests/unit/affix.js
@@ -68,4 +68,33 @@ $(function () {
       }, 16) // for testing in a browser
     }, 0)
   })
+
+  test('should affix-top when scrolling up to offset when parent has padding', function () {
+    stop()
+
+    var templateHTML = '<div id="padding-offset" style="padding-top: 20px;">'
+        + '<div id="affixTopTarget">'
+        + '<p>Testing affix-top class is added</p>'
+        + '</div>'
+        + '<div style="height: 1000px; display: block;"/>'
+        + '</div>'
+    $(templateHTML).appendTo(document.body)
+
+    $('#affixTopTarget')
+      .bootstrapAffix({
+        offset: { top: 120, bottom: 0 }
+      })
+      .on('affixed-top.bs.affix', function () {
+        ok($('#affixTopTarget').hasClass('affix-top'), 'affix-top class applied')
+        start()
+      })
+
+    setTimeout(function () {
+      window.scrollTo(0, document.body.scrollHeight)
+
+      setTimeout(function () {
+        window.scroll(0, 119)
+      }, 250)
+    }, 250)
+  })
 })