Change the fixed navbar's classes depending on the background of the page section it hovers

I am working on a website in Bootstrap 4, that has sections with light and dark backgrounds and a fixed navbar.

The navbar is dark (has the css class bg-dark) and, while it is easily visible against the light sections, it is indistinguishable against the dark ones.

I have tried to change the navbar's navbar-dark bg-dark to navbar-light bg-light when the user reaches a dark section (the solution was suggested on StackOverflow):

$(window).on('activate.bs.scrollspy', function (e,obj) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        return;
    }
    var isBGLight = $(obj.relatedTarget).hasClass('bg-light');
    $('.navbar').toggleClass('navbar-dark bg-dark', isBGLight)
                .toggleClass('navbar-light bg-light', !isBGLight);
});

.page-section {
  padding: 70px 10px
}

.page-section.bg-dark * {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target=".navbar" data-offset="15">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="about.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="services.html">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </ul>
  </nav>

  <div class="container-fluid bg-light page-section">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div class="container-fluid bg-dark page-section">
    <h1>Section 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div class="container-fluid bg-light page-section">
    <h1>Section 3</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
</body>

As you can see, I have used scroll-spy but broken its rules (which state that it requires anchors to "point to an element with an id"): my navbar's items point to other pages of the website and not to sections of the current page.

What is the alternative suited for the situation above?

I'm thinking i'd be easier to properly exploit Bootstrap scrollspy's "activate.bs.scrollspy" event rather than "breaking its rules" and simply override the default href navigation with javascript code.

So i'd suggest you add back the id's to the divs and the matching framgment hrefs to the anchors, let Bootstrap give you the target in the "activate.bs.scrollspy" event via the obj.relatedTarget property, toggle the classes as needed and optionally remove the "activated" class from the nav items so it doesn't appear like the sections are related. If you have additional sections, try using hidden anchors or a hidden nav altogether.

Of course, the cleanest way would be in my opinion to ditch the scrollspy and use window.scrollY and $(window).on('scroll', ...).

Check out the snippet:

$(window).on('activate.bs.scrollspy', function (e, obj) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        return;
    }

    var isBGLight = $(obj.relatedTarget).hasClass('bg-light');
    $('.navbar').toggleClass('navbar-dark bg-dark', isBGLight)
                .toggleClass('navbar-light bg-light', !isBGLight);

    //Optional: Remove the active class from the anchor so it doesn't look like the nav is linked to the sections
    $('.navbar-nav a[href="' + obj.relatedTarget + '"]').removeClass('active');
});

//Here we do the actual navigation
$('.navbar-nav a').click(function(e) {
    //Prevent anchor's default behaviour of briefly jumping to the given section before navigating to another page
    e.preventDefault();
    //Substring to eliminate the leading "#"
    window.location.href = $(e.target).attr('href').substring(1) + '.html';
})

.page-section {
  padding: 70px 10px
}

.page-section.bg-dark * {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target=".navbar" data-offset="15">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <!--Notice I changed the hrefs to point to the div ids-->
        <a class="nav-link" href="#about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#services">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </nav>

  <!--Notice I added the id's to let Bootstrap do it's job-->
  <div id="about" class="container-fluid bg-light page-section">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="services" class="container-fluid bg-dark page-section">
    <h1>Section 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="contact" class="container-fluid bg-light page-section">
    <h1>Section 3</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
</body>

来源：https://stackoverflow.com/questions/52118919/change-the-fixed-navbars-classes-depending-on-the-background-of-the-page-sectio

标签

javascript

jquery

css

bootstrap-4

scrollspy