垂直菜单固定活动类

Question

我有一个带有垂直菜单的页面，菜单链接到页面上的节段元素。我的目标是在滚动到该元素时，给li添加“active”类，以及当部分顶部达到页面顶部时也添加该类别。

这一切都很好运作，但是页面上的最后一个部分元素永远无法到达顶部，因此类别“active”保留在上一个元素上。

我该如何使最后一个元素在滚动到时成为活动状态？

菜单:

<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>

the 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>

- Moishy

---

你有什么问题？ - Raidri

我想让底部元素即使没有到达顶部也能拥有“active”类。 - Moishy

也许你可以轻松检查是否到达了文档末尾，在这种情况下，突出显示你的菜单元素，例如：if (window.height + window.scrollTop == document.height) { // highlight my last element } - Samich

Answer 1

当您将页面滚动到末尾时，此代码将adults设置为活动状态：

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

- Raidri

Answer 2

你可以尝试在底部放置一些内容（底部边距可能有效），或者

//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;
    }

- prince