update table of progress

Author: Dhruvi16

themes/vocabulary_theme/templates/cc-search-guide.html

@@ -10,7 +10,7 @@ <h1>{{ this.title }}</h1>
   <div class="container body">
     <div class="columns">
       <div class="column is-one-quarter">
-        <div class="table-of-progress">
+        <div class="table-of-progress sticky-top">
           <h4 class="step-header">Steps</h4>
           <ul>
             {% for item in this.body.toc %}

webpack/js/main.js

@@ -33,16 +33,20 @@ $(document).ready(function () {
         }
     });
 
-    // Internal Navigation for table of contents component
+    // Internal Navigation for table of contents and table of progress component
     let hash = window.location.hash;
     if (hash.length > 0) {
         $('.menu-list').find('a[href=\"' + hash + '\"]').addClass('is-active');
+        $('.step').find('a[href=\"' + hash + '\"]').find('.number').addClass('is-active');
     }
 
     $(window).on('hashchange', function() {
         let hash = window.location.hash;
         $('.menu-list a[href*="#"]').closest('a').removeClass('is-active');
         $('.menu-list').find('a[href=\"' + hash + '\"]').addClass('is-active');
+
+        $('.step a[href*="#"]').closest('a').find('.number').removeClass('is-active');
+        $('.step').find('a[href=\"' + hash + '\"]').find('.number').addClass('is-active');
     });
 });