Cambie las clases de la barra de navegación fija según el fondo de la sección de la página en la que se encuentra
Estoy trabajando en un sitio web en Bootstrap 4, que tiene secciones con fondos claros y oscuros y una barra de navegación fija.
La barra de navegación está oscura (tiene la clase cssbg-dark) y, aunque es fácilmente visible contra las secciones de luz, es indistinguible contra la oscuridad unos.
He intentado cambiar la barra de navegaciónnavbar-dark bg-dark anavbar-light bg-light cuando el usuario alcanza undark section (elsolució fue sugerido en 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>omo puedes ver, he usado scroll-spy pero rompió sus reglas (que indica que requiere anclajes para "apuntar a un elemento con una identificación"): los elementos de mi barra de navegación apuntan a otras páginas del sitio web yn a secciones de la página actual.
Cuál es elalternativ adecuado para la situación anterior?