Vertical menu Fixed active class

Question

I have a page with a vertical menu on the side that links to section elements on the page. what I'm trying to do is give li “active” class when the element scrolls, and also when the top of the section reaches the top of the page.

all this works fine, but the last section element on the page never reaches the top, so the active class remains on the previous element.

How can I make the last element an active class when scrolling to?

menu:

 <ul class="program-list"> <li class="program-list program-menu-item menu-item-toddlers">Toddlers</li> <li class="program-list program-menu-item menu-item-elementry">Elementry</li> <li class="program-list program-menu-item menu-item-preschool">Preschool</li> <li class="program-list program-menu-item menu-item-adults">Adults</li> </ul> 

jquery

 <script type="text/javascript"> jQuery(window).scroll(function(){ var scrollTop = jQuery(window).scrollTop(); var programTop = jQuery('#programs').offset().top; if(scrollTop >= programTop) {jQuery('ul.program-list li').removeClass('active');} var toddlersTop = jQuery('#toddlers').offset().top - 10; var elementryTop = jQuery('#elementry').offset().top - 10; var preschoolTop = jQuery('#preschool').offset().top - 10; var adultsTop = jQuery('#adults').offset().top - 10; if(scrollTop >= toddlersTop) {jQuery('ul.program-list li').removeClass('active'); jQuery('li.menu-item-toddlers').addClass('active');} if(scrollTop >= elementryTop){jQuery('ul.program-list li').removeClass('active'); jQuery('li.menu-item-elementry').addClass('active');} if(scrollTop >= preschoolTop){jQuery('ul.program-list li').removeClass('active'); jQuery('li.menu-item-preschool').addClass('active');} if(scrollTop >= adultsTop){jQuery('ul.program-list li').removeClass('active'); jQuery('li.menu-item-adults').addClass('active');} }); </script> 

Answer 1

this code sets adults to active when you scroll to the end:

 if (scrollTop == jQuery(document).height() - jQuery(window).height()) {jQuery('ul.program-list li').removeClass('active'); jQuery('li.menu-item-adults').addClass('active');} 

Answer 2

maybe you can try putting something below (the bottom box may work) or

 //html <ul class="program-list"> <li class="program-list program-menu-item menu-item-toddlers">Toddlers</li> <li class="program-list program-menu-item menu-item-elementry">Elementry</li> <li class="program-list program-menu-item menu-item-preschool">Preschool</li> <li class="program-list program-menu-item menu-item-adults">Adults</li> <li class="menu-item-x"></li> </ul> //css .menu-item-x { list-style-type:none; }