how to use scroll-spy to change the background classes of the nav, but without necessarily declaring that the change works because the menu does not have all the sections of the page. and especially how to make one of those changes by just going down a little without having reached another section, since the nav must be transparent, by lowering a bit change to white, then what it detects in each section depending on the class . and how to do it also affects the other elements as an example: text, logo, etc, to change it also depending on what it detects.
Thank you very much., try to use midnight js, but I can not make it work well.
in advance thank you very much
$(window).on('activate.bs.scrollspy', function (e,obj) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
return;
}
var isScrolled = $(document).scrollTop() > 1;
$('.menu').toggleClass('nav_white', isScrolled);
var Transparent = $(obj.relatedTarget).hasClass('nav_transparent');
var White = $(obj.relatedTarget).hasClass('nav_white');
var Blue = $(obj.relatedTarget).hasClass('nav_blue');
$('.nav').toggleClass('nav_transparent', Transparent, !White, !Blue)
.toggleClass('nav_white', White, !Transparent, !Blue)
.toggleClass('nav_blue', Blue, !Transparent, !White);
});.page-section {
padding: 70px 10px
}
.move{
background-color:#0f0f0f
}
.page-section.bg-dark * {
color: #fff;
}
.transparent{
background-color:green;
}
.nav_transparent{background-color:yellow;}
.nav_white{background-color:grey;}
.nav_blue{background-color:black;}<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=".nav" data-offset="15">
<nav class="menu nav navbar navbar-expand-sm nav_transparent fixed-top">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#section">Section 0</a>
</li>
<li class="nav-item d-none">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Section 4</a>
</li>
</ul>
</nav>
<div id="section" class="container-fluid bg-light page-section">
<h1>Section 0</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="section1" class="container-fluid bg-light page-section nav_transparent">
<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="section2" class="container-fluid bg-light page-section nav_blue">
<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="section3" class="nav_white container-fluid bg-dark 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>
<div id="section4" class="nav_blue container-fluid bg-light page-section">
<h1>Section 4</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>