Clear scrollspy selection above first section

Closes #13563 by merging it.

js/scrollspy.js

@@ -91,8 +91,9 @@
       return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
     }
 
-    if (activeTarget && scrollTop <= offsets[0]) {
-      return activeTarget != (i = targets[0]) && this.activate(i)
+    if (activeTarget && scrollTop < offsets[0]) {
+      this.activeTarget = null
+      return this.clear()
     }
 
     for (i = offsets.length; i--;) {
@@ -106,9 +107,7 @@
   ScrollSpy.prototype.activate = function (target) {
     this.activeTarget = target
 
-    $(this.selector)
-      .parentsUntil(this.options.target, '.active')
-      .removeClass('active')
+    this.clear()
 
     var selector = this.selector +
         '[data-target="' + target + '"],' +
@@ -127,6 +126,12 @@
     active.trigger('activate.bs.scrollspy')
   }
 
+  ScrollSpy.prototype.clear = function () {
+    $(this.selector)
+      .parentsUntil(this.options.target, '.active')
+      .removeClass('active')
+  }
+
 
   // SCROLLSPY PLUGIN DEFINITION
   // ===========================

js/tests/unit/scrollspy.js

@@ -73,7 +73,7 @@ $(function () {
     $scrollspy.scrollTop(350)
   })
 
-  test('middle navigation option correctly selected when large offset is used', function () {
+  test('should correctly select middle navigation option when large offset is used', function () {
     stop()
 
     var sectionHTML = '<div id="header" style="height: 500px;"></div>'
@@ -142,4 +142,45 @@ $(function () {
       .then(function () { return testElementIsActiveAfterScroll('#li-2', '#div-2') })
   })
 
+  test('should clear selection if above the first section', function () {
+    stop()
+
+    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>'
+    var $section = $(sectionHTML).appendTo('#qunit-fixture')
+
+    var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">'
+        + '<div id="spacer" style="height: 100px;"/>'
+        + '<div id="one" style="height: 100px;"/>'
+        + '<div id="two" style="height: 100px;"/>'
+        + '<div id="three" style="height: 100px;"/>'
+        + '<div id="spacer" style="height: 100px;"/>'
+        + '</div>'
+    var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture')
+
+    $scrollspy
+      .bootstrapScrollspy({
+        target: '#navigation',
+        offset: $scrollspy.position().top
+      })
+      .one('scroll.bs.scrollspy', function () {
+        strictEqual($('.active').length, 1, '"active" class on only one element present')
+        strictEqual($('.active').has('#two-link').length, 1, '"active" class on second section')
+
+        $scrollspy
+          .one('scroll.bs.scrollspy', function () {
+            strictEqual($('.active').length, 0, 'selection cleared')
+            start()
+          })
+          .scrollTop(0)
+      })
+      .scrollTop(201)
+  })
+
 })