Struggling to implement scroll-spy for adding an active class to the ul li elements on a one-page scroll with a sticky nav. For some reason, I can't seem to get it to work within my project. Below is the menu structure:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
<div class="container_full height">
<div class="navbar-header page-scroll height">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-holder">
<img class="" src="img/logo-p.png"/>
<span>
<a class="page-scroll" href="#home-page">xxxxxx</a>
<i>xxxxxxx</i>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse height">
<ul class="nav navbar-nav height">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#home-page">item1</a>
</li>
<li>
<a class="page-scroll" href="#item2">item2</a>
</li>
<li>
<a class="page-scroll" href="#item3">item3</a>
</li>
<li>
<a class="page-scroll" href="#item4">item4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->
<div id="home-page" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
//many divs css parallax--
The javascript file for the nav bar is as follows:
$('.parallax').scroll(function() {
if ($('.parallax').scrollTop() > 100) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".my-nav").addClass("nav-resize");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".my-nav").removeClass("nav-resize");
$(".moveLogo").removeClass("moveLogo-resize");
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
var position = $($anchor.attr('href')).offset().top + $('.parallax').scrollTop() ;
$('html,body,.parallax').stop().animate({
scrollTop: position
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
When using the above method without the parallax divs, it works fine. However, currently, the li class remains active on the last item when scrolling down the page.
https://i.sstatic.net/N4Cx7.jpg
In the CSS, green signifies scrollable content within the parent container "Blue", while the green divs are targeting specific IDs.
.blue{
height:100%;
width:100%;
overflow:hidden;
}
.green // Has many divs
I've attempted to target the green > divs but haven't had any success so far.