bootstrap 4 beta scrollspy not working

Question

I realize this is a duplicate of this question, but the answer given there isn't using the scrollspy plug in but is instead writing out all of the javascript to highlight active links on scroll.

I've gone through pretty much all other iterations of this question that I could find but my code looks the same as in the solutions given so I'm not sure of the problem. (most other questions are also not for bootstrap 4 beta but rather earlier versions)

I'm using the javascript file from this scrolling nav template to scroll down to a section when you click a link. This works, so the links are all connected to the sections by their ID's properly.

The template's JS file has the JS to activate scrollspy built in, but it's not working for me.

The body's position is set as relative. The jQuery.js file is placed before the before the bootstrap.js file.

I've also tried the method of applying the data-spy and data-target to the body tag.

I have styled the .active class but before and after doing this, I've inspected my page in chrome, and the .active class is not being applied to the links as you scroll so I don't think the problem is related to CSS.

Here is the javascript:

$('body').scrollspy({
    target: '#mainNav',
    offset: 0
  });

and the code:

<nav class="navbar navbar-expand-md navbar-dark fixed-top" id="mainNav" style="margin-bottom:0;padding-bottom:0;">
  <div class="container-fluid">
    <a class="navbar-brand js-scroll-trigger" href="#page-top"><img class="img-fluid" src="backgroundimages/logoSmall.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
      <li class="nav-item navMenuBox">
        <a class="nav-link js-scroll-trigger" href="#howto" style="display:block;">How to Use</a>
      </li>
      <li class="nav-item navMenuBox">
        <a class="nav-link js-scroll-trigger" href="#Mappy" style="display:block;">Map</a>
      </li>
        <li class="nav-item navMenuBox">
        <a class="nav-link js-scroll-trigger" href="#about" style="display:block;">About</a>
      </li>
        <li class="nav-item navMenuBox">
        <a class="nav-link js-scroll-trigger" href="#contact" style="display:block;">Contact</a>
      </li>
    </ul>
  </div>
</div>
</nav>

Answer 1

SO. to fix this I realized that the spyscroll is mainly dependent on having either navbar-dark or navbar-light applied to your navbar. It would've been very helpful if this was in the documentation! Even though I had navbar-dark applied, since I'd assumed the .active state was connected to the nav-links or nav-items, I had styled the nav-links, causing the .active state to not work. To fix my issue I applied my custom styles to the .navbar-dark li a, and my custom active state to

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active

(this was pulled from the bootstrap css, I searched through it to figure out how the .active was being styled & just copy/pasted these classes into my custom CSS document)

Hope this helps someone else with a similar problem!!

Answer 2

Based on the information provided, it's difficult to discern where the actual issue is coming from. My guess is that you're missing a dependency from the scrolling nav template from github, but I could be wrong.

If you haven't included the jQuery.easing from their package.json file, that could be the issue.

I've taken the code you were using and put it into a codepen project, and was able to make it work using jQuery 3.2.1 and jQuery-easing 1.4.1.

You can view it here.