Clear scrollspy selection above first section

Closes #13563 by merging it.

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)
+  })
+
 })