I have not being able to get scrollspy to work-CodePudding

I have been trying for the past 4 hours but I am obviously doing something wrong. Should the scrollspy components be placed in a separate div, am I missing something else? I have checked many examples and questions but can't figure it out. One thing I can't do is set the position to relative, as it messes up some other things. I have added Bootstrap js at the end of the HTML file.

This is the JSFiddle link https://jsfiddle.net/o78x2ezn/1/

              <body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="50">
      
            <nav id="navbar" >
              <div >
                <button  type="button" data-bs-toggle="collapse" data-bs-offset="50" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span ></span>
                </button>
                <div  id="navbarNav">
                  <ul >
                    <li >
                      <a  href="#home">Home</a>
                    </li>
                    <li >
                      <a  href="#skills">Skills</a>
                    </li>
                    <li >
                      <a  href="#projects">Projects</a>
                    </li>
                    <li >
                      <a  href="#about">About</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>

So there are 2 issues, first is that the the navbar buttons stay in the active state for only a moment when clicked, otherwise they are never in the active state.

CodePudding user response：

Replace your bootstrap with:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

add position:relative; to body and wrap your all sections below nav with <div > and set wrapper position to relative .

CodePudding user response：

that's beccause of Scrollspy ignore the target elements that are not visible.

you should change these three class styles :

.skills-align {
  visibility: hidden;
}

 {
  visibility: hidden;
}

.about-align {
  visibility: hidden;
}

to this :

.skills-align, .projects-align, .about-align {
  visibility: visible;
}