Sticky sidebar menu with scrollspy?

Topic: Sticky sidebar menu with scrollspy?

linx priority asked 2 years ago

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?

Grzegorz Bujański staff commented 2 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 priority commented 2 years ago

Here it is: https://mdbootstrap.com/snippets/standard/linx/3520308

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

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>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
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

linx

37Support score
3Questions 2Answers 1Snippets