Mdb ScrollSpy the component does not work for me.


Topic: Mdb ScrollSpy the component does not work for me.

billel47 pro asked 6 years ago

Hi, 

When I use the new component  Scrollspy , I got errors like :

"ERROR TypeError: Cannot set property 'active' of undefined
at ScrollSpyService.push../node_modules/ng-uikit-pro-standard/esm5/ng-uikit-pro-standard.es5.js.ScrollSpyService.setActiveLin ... "

here is my code :

<header class="intro-header">

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar" [containerInside]="true">

<mdb-navbar-brand>

<a class="logo navbar-brand waves-light" mdbWavesEffect href="#">

<img src="assets/logo.png" height="40" alt="mdb logo">

</a>

</mdb-navbar-brand>

<links >

<ul class="navbar-nav ml-auto" mdbScrollSpy="menu" >

<li class="nav-item waves-light black-text" mdbWavesEffect>

<a mdbPageScroll [pageScrollInterruptible]="false" class="nav-link" mdbScrollSpyLink="intro" href="#intro" >Home <span class="sr-only">(current)</span></a>

</li>

<li class="nav-item waves-light black-text" mdbWavesEffect>

<a mdbPageScroll [pageScrollInterruptible]="false" class="nav-link" mdbScrollSpyLink="aboutUs" href="#aboutUs" >About us</a>

</li>

<li class="nav-item waves-light black-text" mdbWavesEffect>

<a mdbPageScroll [pageScrollInterruptible]="false" class="nav-link" mdbScrollSpyLink="contactUs" href="#contactUs" >Contact us</a>

</li>

</ul>

</links>

</mdb-navbar>

</header>


<section id="intro" mdbScrollSpyElement="menu">...<>

<section id="aboutUs" mdbScrollSpyElement="menu">...<>

<section id="contactUs" mdbScrollSpyElement="menu">...<>

Arkadiusz Idzikowski staff answered 6 years ago

Hello,

It's strange but it looks like in this case the error is caused by mdbWavesEffect. Please try to remove it from li tags and let me know if that works for you. Also if you need to attach scrollspy to the window scroll please use mdbScrollSpyWindow instead of mdbScrollSpyElement.

Regards,

Arek


billel47 pro commented 6 years ago

Hello Arek,

thanks for your answer , I appreciate it .

I removed mdbWavesEffect from li elements and  the errors are gone , but it seem not working , the scrollspy component or  mdbScrollSpyLink changes anchor link (a) state by adding/removing active class rather the parent element (li).

so I  put mdbScrollSpyLink  on li element and it worked fine even with  mdbWavesEffect directive. 

Regards,

Bilal


Anshul Kumar commented 4 years ago

Not a single exaample is working guys. Not a single active link is changing from basic examples.


Arkadiusz Idzikowski staff commented 4 years ago

Please provide more information about the problem: your MDB Angular version, use code, and potential error messages.


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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No