Merge pull request #13589 from mrobinet/scrollspy-maxScroll-with-offset

Adjust for Scrollspy offset when calculating maxScroll.

js/scrollspy.js

@@ -69,7 +69,7 @@
   ScrollSpy.prototype.process = function () {
     var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset
     var scrollHeight = this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
-    var maxScroll    = scrollHeight - this.$scrollElement.height()
+    var maxScroll    = this.options.offset + scrollHeight - this.$scrollElement.height()
     var offsets      = this.offsets
     var targets      = this.targets
     var activeTarget = this.activeTarget

js/tests/unit/scrollspy.js

@@ -42,7 +42,8 @@ $(function () {
     ok($topbar.find('.active', true))
   })
 
-  test('should only switch active class on current target', function () {
+  asyncTest('should only switch active class on current target', function () {
+    expect(1);
     var sectionHTML = '<div id="root" class="active">' +
         '<div class="topbar">' +
         '<div class="topbar-inner">' +
@@ -75,7 +76,40 @@ $(function () {
         .find('#scrollspy-example')
         .bootstrapScrollspy({target: '#ss-target'})
 
+    $scrollSpy.on('scroll.bs.scrollspy', function () {
+      ok($section.hasClass('active'), 'Active class still on root node')
+      start()
+    })
     $scrollSpy.scrollTop(350);
-    ok($section.hasClass('active'), 'Active class still on root node')
+  })
+
+  asyncTest('middle navigation option correctly selected when large offset is used', function () {
+    expect(3);
+    var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
+        '<nav id="navigation" class="navbar">' +
+        '<ul class="nav navbar-nav">' +
+        '<li class="active"><a id="one-link" href="#one">One</a></li>' +
+        '<li><a id="two-link" href="#two">Two</a></li>' +
+        '<li><a id="three-link" href="#three">Three</a></li>' +
+        '</ul>' +
+        '</nav>' +
+        '<div id="content" style="height: 200px; overflow-y: auto;">' +
+        '<div id="one" style="height: 500px;"></div>' +
+        '<div id="two" style="height: 300px;"></div>' +
+        '<div id="three" style="height: 10px;"></div>' +
+        '</div>',
+        $section = $(sectionHTML).appendTo('#qunit-fixture'),
+        $scrollSpy = $section
+        .show()
+        .filter('#content')
+    $scrollSpy.bootstrapScrollspy({target: '#navigation', offset: $scrollSpy.position().top})
+
+    $scrollSpy.on('scroll.bs.scrollspy', function () {
+      ok(!$section.find('#one-link').parent().hasClass('active'), 'Active class removed from first section')
+      ok($section.find('#two-link').parent().hasClass('active'), 'Active class on middle section')
+      ok(!$section.find('#three-link').parent().hasClass('active'), 'Active class not on last section')
+      start()
+    })
+    $scrollSpy.scrollTop(550);
   })
 })