Topic: Sticky sidebar menu with scrollspy?
I'm having trouble figuring out how to use the sticky and scrollspy components together.
I have a sidebar menu with anchor links to page headings. I need it to do the following:
- Stick below the navbar as the user scrolls down, and above the footer as the user scrolls up. This is working.
- Highlight each anchor link as the user scrolls through the page and the corresponding heading nears the top of the viewport. This is not working.
Here's my code on the body element:
<body class="{{ body_class }}"
data-mdb-spy="scroll"
data-mdb-target="#sidenav"
data-mdb-offset="130">
And on the parent element of #sidenav:
<div class="block-sidenav py-4 sticky"
data-mdb-sticky-boundary="true"
data-mdb-sticky-direction="both"
data-mdb-sticky-offset="61"
data-mdb-sticky-delay="61">
Finally, #sidenav itself:
<nav id="sidenav">
<ul class="nav-sidenav list-group">
...
</ul>
</nav>
There was a way to do this in MDB4, but I can't find anything in the documentation about doing it with the new data attribute syntax in MDB5. Can you help?
Elements do not mark as active because nav-pills menu-sidebar classes are missing for ul element and nav-link for li element. This code should work fine for you:
<nav id="sidenav">
<ul class="nav-sidenav list-group nav-pills menu-sidebar">
<li class="list-group-item font-weight-bold">
Topics
</li>
<li class="nav-link">
<a class="nav-link" href="#alfa">Alfa</a>
</li>
<li class="nav-link">
<a class="nav-link" href="#bravo">Bravo</a>
</li>
<li class="nav-link">
<a class="nav-link" href="#charlie">Charlie</a>
</li>
<li class="nav-link">
<a class="nav-link" href="#delta">Delta</a>
</li>
<li class="nav-link">
<a class="nav-link" href="#echo">Echo</a>
</li>
<li class="nav-link">
<a class="nav-link" href="#foxtrot">Foxtrot</a>
</li>
</ul>
</nav>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.1
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 3 years ago
unfortunately, I am unable to reproduce this issue. Please create a snippet in which this error occurs. I'll check why it doesn't work for you.
linx pro premium priority commented 3 years ago
Here it is: https://mdbootstrap.com/snippets/standard/linx/3520308