Am very new to Front End Development. Have applied Scrollspy as mentioned in bootstrap. However, it is not working as desired. I have 6 sticky righgt-nav and it always active on the last a tag. Even if I click any of the a tag , the active class not toggling.
Kindly see the below code:-
<body onhashchange="if (typeof(_spBodyOnHashChange) != 'undefined') _spBodyOnHashChange();" data-offset="50" data-target="#nav-scroll" data-spy="scroll" class="position-relative ms-backgroundImage" id="content"><span id="DeltaSPWebPartManager">
<div class="right-nav d-none d-sm-block">
<nav class="" id="nav-scroll">
<ul class="nav" data-spy="affix" data-offset-top="205">
<li class=" nav-item test1" style="background-color: rgb(246, 246, 246); border-color: rgb(211, 211, 211);">
<a href="#nav-home" class="nav-link" id="rightnavhome" title="Home" style="background-color: rgb(6, 103, 58);">
<div class="fa fa-home" style="color: rgb(6, 103, 58);"></div>
</a>
</li>
<li class="nav-item test2">
<a href="#frequently-used-head" class="nav-link" id="rightnavFrequently" title="Frequently Used" style="background-color: rgb(6, 103, 58);">
<div class="fa fa-question-circle-o" style="color: rgb(6, 103, 58);"></div>
</a>
</li>
<li class="nav-item test3">
<a href="#whatsnew-bg" class="nav-link" id="rightnavwhatsnew" title="Whats New" style="background-color: rgb(6, 103, 58);">
<div class="fa fa-gear" style="color: rgb(6, 103, 58);"></div>
</a>
</li>
<li class="nav-item test4">
<a href="#initiatives" class="nav-link" id="rightnavinitiative" title="Initiative" style="background-color: rgb(6, 103, 58);">
<div class="fa fa-star-o" style="color: rgb(6, 103, 58);"></div>
</a>
</li>
<li class="nav-item test5">
<a href="#top-highlight-head" class="nav-link" id="rightnavtophigh" title="Top Highlights" style="background-color: rgb(6, 103, 58);">
<div class="fa fa-volume-up" style="color: rgb(6, 103, 58);"></div>
</a>
</li>
<li class="nav-item test6">
<a href="#get-in-tuch-sec" class="nav-link active" id="rightnavgetintouch" title="Get In Touch" style="background-color: rgb(6, 103, 58);">
<div class="fa fa-phone" style="color: rgb(6, 103, 58);">
</div>
</a>
</li>
<li class="nav-item test7">
<a href="#" class="nav-link" id="ahrefHappinessMeterWidgetLink" title="Rate your Experience" style="background-color: rgb(6, 103, 58);">
<div class="fa fa-smile-o" style="color: rgb(6, 103, 58);"></div>
<script id="happiness-meter-widget-web-script" async="" src="https://happinessmeter.gov.ae/webwidget/web.js" data-container-id="" data-language="en" data-key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NTZ9.uI2T8P3Pam4h3IAR2m_uF50aH5F10Iw-dHbLciteZMk" data-on-finish="" data-entity-sequence-id="371" data-customer-id="0" data-email="" data-phone="" data-transaction-id="0" data-emirates-id="0" data-version="latest" data-delay="0" data-mode="click" data-mode-click-id="ahrefHappinessMeterWidgetLink" data-css-url="https://happinessmeter.gov.ae/webwidget/web.css">
</script>
</a>
</li>
</ul>
</nav>
</div>