Scrollspy active not working with bootsrap 5

Question

I need a help. I used the code from Bootstrap example but it didn't work.

I put data target on Javascript, and i also put data-target on body. The code is full copy from bootstrap-5 scrollspy, but i don't completely understand how to use it. Thank you for your help.

 $('body').scrollspy({ target: '#navbar-example2' });

<body data-target="#navbar-example2">
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading1">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading2">About Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading3">Skills</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#scrollspyHeading4">My Project</a>
        </li>
      </ul>
    </nav>
    
    <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
      <section id="scrollspyHeading1">
      </section>
      <section id="scrollspyHeading2">
      </section>
      <section id="scrollspyHeading3">
      </section>
      <section id="scrollspyHeading4">
      </section>
    </div>
</body>

Oh, confused as to why `$('body').scrollspy({ target: '#navbar-example2' });` is in the question at all — Carol Skelly, Aug 18 '21 at 14:42
I found that code while searching for how to fix scrollspy. Actually, that has the same function as data-target on body html. — lynn, Aug 18 '21 at 15:18
Do you understand this it's jQuery code? Bootstrap 5 no longer requires jQuery. That's why I asked if you were using jQuery, — Carol Skelly, Aug 18 '21 at 15:25

Carol Skelly · Accepted Answer · 2021-08-18T15:27:04.880

2

As explained in the Bootstrap 5 docs..

"Scrollable containers and keyboard access If you’re making a scrollable container (other than the ), be sure to have a height set and overflow-y: scroll;..."

For example,

.scrollspy-example {
    position: relative;
    height: 300px;
    overflow: auto;
}

Demo

edited Aug 18 '21 at 15:27

answered Aug 18 '21 at 14:27

Carol Skelly

351,302
90
710
624

I'm sorry, I don't get the point. Is that mean to put overflow-y: scroll; on css body? – lynn Aug 18 '21 at 14:35
thank you so much, it's help. bc of your help, i'm trying to figure other, and it's finally the things i've been looking. I put the data-bs-spy="scroll" in body instead of create a div. – lynn Aug 19 '21 at 12:21

Scrollspy active not working with bootsrap 5

1 Answers1