In the process of developing a website using Bootstrap 4, I encountered a challenge with sections featuring both light and dark backgrounds along with a fixed navbar.
The navbar, which is set to dark using the css class bg-dark, becomes indistinguishable against the dark background sections while being easily visible on the light ones.
To address this issue, I attempted to dynamically change the navbar's style from navbar-dark bg-dark to navbar-light bg-light when the user scrolls into a dark section. The solution provided on StackOverflow involved utilizing scroll spy functionality:
$(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 scrolling through this section and observe the navigation bar behavior! Try scrolling through this section and observe the navigation bar behavior!</p>
<p>Try scrolling through this section and observe the navigation bar behavior! Try scrolling through this section and observe the navigation bar behavior!</p>
</div>
<div class="container-fluid bg-dark page-section">
<h1>Section 2</h1>
<p>Try scrolling through this section and observe the navigation bar behavior! Try scrolling through this section and observe the navigation bar behavior!</p>
<p>Try scrolling through this section and observe the navigation bar behavior! Try scrolling through this section and observe the navigation bar behavior!</p>
</div>
<div class="container-fluid bg-light page-section">
<h1>Section 3</h1>
<p>Try scrolling through this section and observe the navigation bar behavior! Try scrolling through this section and observe the navigation bar behavior!</p>
<p>Try scrolling through this section and observe the navigation bar behavior! Try scrolling through this section and observe the navigation bar behavior!</p>
</div>
</body>While my attempt with scroll-spy was helpful, it conflicted with its requirement for anchors to point to elements with an id, whereas my navbar's items directed users to other pages rather than sections within the same page.
I am seeking alternative solutions tailored to the scenario described above. Your input are highly appreciated!