ScrollSpy not working. Active class isn't set.


Topic: ScrollSpy not working. Active class isn't set.

nothingeni asked 2 years ago

Hello ! I'm trying to use the scrollspy for my entire page. I've a navbar which autoscroll the user if he clicks on a section. I want that navbar to scrollspy the page to display the section where the user is.

Expected behavior

Links in navbar should become active while scrolling.

Actual behavior

The active class is never set. When I try to set manually the active class to a link, it is removed on page load.

Resources (screenshots, code snippets etc.)

navbar.component.html

<mdb-navbar #navbarid SideClass="navbar navbar-expand-md navbar-dark sticky-top bg-white z-depth-0">

    <mdb-navbar-brand><a class="navbar-brand" (click)="scrollToElement('#section1')">Chalet Mosan
<span class="localite">Hermeton-Sur-Meuse</span></a></mdb-navbar-brand>

    <links>
        <ul class="navbar-nav" mdbScrollSpy="scrollspy1">
            <li class="nav-item">
                <a mdbScrollSpyLink="section1" (click)="scrollToElement('#section1')" class="nav-link text-nowrap active">Le chalet<span class="sr-only">(current)</span></a> 
            </li>
 //On page load, the 'active' is removed. When I try to inspect the element, there is no 'active' class
            <li class="nav-item">
                <a mdbScrollSpyLink="section2" (click)="scrollToElement('#section2')" class="nav-link text-nowrap">Le petit dejeuné</a>
            </li>
            <li class="nav-item">
                <a mdbScrollSpyLink="section3" (click)="scrollToElement('#section3')" class="nav-link text-nowrap">Les petits plus</a>
            </li>
            <li class="nav-item">
                <a mdbScrollSpyLink="section4" (click)="scrollToElement('#section4')" class="nav-link text-nowrap">Nos formules</a>
            </li>
            <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
                <a mdbScrollSpyLink="section5" (click)="scrollToElement('#section5')" class="nav-link text-nowrap">Contact/Réservations</a>
            </li>
        </ul>
    </links>

</mdb-navbar>

section1 to section5.html

<section mdbScrollSpyWindow="scrollspy1" id="{{ name }}"> //id is filled with section1 to section5
    <h2>{{ title }}</h2>
    <div class="row">
        <div class="col-8">
            foo
        </div>
        <div class="col-4">
            foo
        </div>
    </div>
</section>

I don't get why this isnt working... I followed the example shown in documentation but still can't make it work.

Thanks a lot for time spent helping me resolving this!


Arkadiusz Idzikowski staff answered 2 years ago

We couldn't reproduce the problem with the active class, it is added correctly on our end. Here is an example based on the code from our documentation. In case of any further problems please edit the code in your question to provide an example on which we will be able to reproduce this issue. We don't have access to your ts code and we can't make sure if the id names are added correctly.

I added some offsets to make it work correctly in this specific case.

HTML:

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo fixed-top">

  <!-- Navbar brand -->
  <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>

  <!-- Collapsible content -->
  <links>

      <!-- Links -->
      <ul class="navbar-nav mr-auto" mdbScrollSpy="scrollspy1">
          <li class="nav-item">
              <a class="nav-link waves-light" mdbScrollSpyLink="section1">Section 1<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link waves-light" mdbScrollSpyLink="section2">Section 2</a>
          </li>
          <li class="nav-item">
              <a class="nav-link waves-light" mdbScrollSpyLink="section3">Section 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link waves-light" mdbScrollSpyLink="section4">Section 4</a>
        </li>
      </ul>
      <!-- Links -->

<!-- Search form -->
      <form class="form-inline waves-light">
          <div class="md-form my-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search">
          </div>
      </form>
  </links>
  <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

<section mdbScrollSpyWindow="scrollspy1" id="section1" class="section primary-color" offset="50"></section>
<section mdbScrollSpyWindow="scrollspy1" id="section2" class="section default-color" offset="50"></section>
<section mdbScrollSpyWindow="scrollspy1" id="section3" class="section stylish-color" offset="50"></section>
<section mdbScrollSpyWindow="scrollspy1" id="section4" class="section secondary-color" offset="50"></section>

SCSS (global in styles.scss file):

.navbar .nav-link.active {
  background-color: lightblue;
}

.section {
  height: 100vh;
}

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: Desktop
  • Browser: Chrome latest
  • OS: Windows 10 latest
  • Provided sample code: No
  • Provided link: No