Sticky sidebar menu with scrollspy?


Topic: Sticky sidebar menu with scrollspy?

linx pro premium priority asked 3 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:

  1. Stick below the navbar as the user scrolls down, and above the footer as the user scrolls up. This is working.
  2. 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 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


Grzegorz Bujański staff answered 3 years ago

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>

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: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No