diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 52b8b6d20295587a177613566124c2513a104720..dd2dca8859e3fddaf3fec2aa62bb419fa5b5b08f 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -45,6 +45,7 @@ const ScrollSpy = (($) => {
   const ClassName = {
     DROPDOWN_ITEM : 'dropdown-item',
     DROPDOWN_MENU : 'dropdown-menu',
+    NAV_ITEM      : 'nav-item',
     NAV_LINK      : 'nav-link',
     NAV           : 'nav',
     ACTIVE        : 'active'
@@ -57,6 +58,7 @@ const ScrollSpy = (($) => {
     LI              : 'li',
     LI_DROPDOWN     : 'li.dropdown',
     NAV_LINKS       : '.nav-link',
+    NAV_ITEMS       : '.nav-item',
     DROPDOWN        : '.dropdown',
     DROPDOWN_ITEMS  : '.dropdown-item',
     DROPDOWN_TOGGLE : '.dropdown-toggle'
@@ -252,7 +254,7 @@ const ScrollSpy = (($) => {
       } else {
         // todo (fat) this is kinda sus...
         // recursively add actives to tested nav-links
-        $link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE)
+        $link.parents(Selector.LI).addClass(ClassName.ACTIVE)
       }
 
       $(this._scrollElement).trigger(Event.ACTIVATE, {
@@ -261,7 +263,7 @@ const ScrollSpy = (($) => {
     }
 
     _clear() {
-      $(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
+      $(this._selector).parents(Selector.LI).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
     }
 
 
@@ -324,3 +326,4 @@ const ScrollSpy = (($) => {
 })(jQuery)
 
 export default ScrollSpy
+lSpy
diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js
index 97ddd16ece16fe5e33b64fe7e1df3a3b3867b9a8..5e4a69c2f329111c821159cdc1bfcbf6a8ef45f0 100644
--- a/js/tests/unit/scrollspy.js
+++ b/js/tests/unit/scrollspy.js
@@ -141,9 +141,9 @@ $(function () {
     var sectionHTML = '<div id="header" style="height: 500px;"></div>'
         + '<nav id="navigation" class="navbar">'
         + '<ul class="nav navbar-nav">'
-        + '<li class="active"><a class="nav-link" id="one-link" href="#one">One</a></li>'
-        + '<li><a class="nav-link" id="two-link" href="#two">Two</a></li>'
-        + '<li><a class="nav-link" id="three-link" href="#three">Three</a></li>'
+        + '<li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>'
+        + '<li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>'
+        + '<li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>'
         + '</ul>'
         + '</nav>'
         + '<div id="content" style="height: 200px; overflow-y: auto;">'
@@ -159,9 +159,9 @@ $(function () {
     $scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top })
 
     $scrollspy.one('scroll', function () {
-      assert.ok(!$section.find('#one-link').hasClass('active'), '"active" class removed from first section')
-      assert.ok($section.find('#two-link').hasClass('active'), '"active" class on middle section')
-      assert.ok(!$section.find('#three-link').hasClass('active'), '"active" class not on last section')
+      assert.ok(!$section.find('#one-link').parents().hasClass('active'), '"active" class removed from first section')
+      assert.ok($section.find('#two-link').parents().hasClass('active'), '"active" class on middle section')
+      assert.ok(!$section.find('#three-link').parents().hasClass('active'), '"active" class not on last section')
       done()
     })
 
@@ -173,8 +173,8 @@ $(function () {
     var navbarHtml =
         '<nav class="navbar">'
       + '<ul class="nav">'
-      + '<li><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>'
-      + '<li><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>'
+      + '<li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>'
+      + '<li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>'
       + '</ul>'
       + '</nav>'
     var contentHtml =
@@ -193,7 +193,7 @@ $(function () {
       var deferred = $.Deferred()
       var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
       $content.one('scroll', function () {
-        assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
+        assert.ok($(element).parent().hasClass('active'), 'target:' + target + ', element' + element)
         deferred.resolve()
       })
       $content.scrollTop(scrollHeight)
@@ -211,9 +211,9 @@ $(function () {
     var done = assert.async()
     var navbarHtml = '<nav id="navigation" class="navbar">'
       + '<ul class="nav">'
-      + '<li><a id="a-1" class="nav-link" href="#div-1">div 1</a>'
+      + '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>'
       + '<ul>'
-      + '<li><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
+      + '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
       + '</ul>'
       + '</li>'
       + '</ul>'
@@ -235,8 +235,8 @@ $(function () {
       if (++times > 3) return done()
 
       $content.one('scroll', function () {
-        assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
-        assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
+        assert.ok($('#a-1').parents().hasClass('active'), 'nav item for outer element has "active" class')
+        assert.ok($('#a-2').parents().hasClass('active'), 'nav item for inner element has "active" class')
         testActiveElements()
       })
 
@@ -251,9 +251,9 @@ $(function () {
     var sectionHTML = '<div id="header" style="height: 500px;"></div>'
         + '<nav id="navigation" class="navbar">'
         + '<ul class="nav navbar-nav">'
-        + '<li><a id="one-link"   class="nav-link active" href="#one">One</a></li>'
-        + '<li><a id="two-link"   class="nav-link" href="#two">Two</a></li>'
-        + '<li><a id="three-link" class="nav-link" href="#three">Three</a></li>'
+        + '<li class="nav-item active" id="one-link"><a class="nav-link" href="#one">One</a></li>'
+        + '<li class="nav-item" id="two-link"><a class="nav-link" href="#two">Two</a></li>'
+        + '<li class="nav-item" id="three-link"><a class="nav-link" href="#three">Three</a></li>'
         + '</ul>'
         + '</nav>'
     $(sectionHTML).appendTo('#qunit-fixture')
@@ -290,11 +290,11 @@ $(function () {
     var navbarHtml =
         '<nav class="navbar">'
       + '<ul class="nav">'
-      + '<li><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>'
-      + '<li><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>'
-      + '<li><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>'
-      + '<li><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>'
-      + '<li><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>'
+      + '<li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>'
+      + '<li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>'
+      + '<li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>'
+      + '<li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>'
+      + '<li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>'
       + '</ul>'
       + '</nav>'
     var contentHtml =
@@ -315,7 +315,7 @@ $(function () {
       var deferred = $.Deferred()
       var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
       $content.one('scroll', function () {
-        assert.ok($(element).hasClass('active'), 'target:' + target + ', element: ' + element)
+        assert.ok($(element).parents().hasClass('active'), 'target:' + target + ', element: ' + element)
         deferred.resolve()
       })
       $content.scrollTop(scrollHeight)
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index efe6f593bb4432d4c9a728b99b3cfff87c8f80bd..00160aa6a4a71cbbe27245a287186b413e88b39b 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -17,7 +17,7 @@
   <nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
     <div class="js-navbar-scrollspy">
       <ul class="nav navbar-nav">
-        <li class="nav-item"><a class="nav-link active" href="#fat">@fat</a></li>
+        <li class="nav-item active"><a class="nav-link" href="#fat">@fat</a></li>
         <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
         <li class="dropdown nav-item">
           <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown</a>