垂直菜單固定活動類

我有一個頁面，在頁面上有垂直菜單，鏈接到頁面上的部分元素。我想要做的是給li一個'活躍'類，當元素滾動到以及節的頂部到達頁面的頂部時。垂直菜單固定活動類

所有這些工作正常 - 但是，頁面上的最後一個部分元素永遠不會到達頂部，所以活動類保留在前一個元素上。

如何讓最後一個元素在滾動時處於活動狀態？

菜單：

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

來源

2013-07-30 Mark

什麼是你的問題？ – Raidri

我希望能夠在底部元素上具有「活動」類，即使它尚未達到頂部 – Mark

也許您可以輕鬆檢查是否到達文檔末端，並在此情況下突出顯示最後一個菜單元素，例如：''如果（window.height + window.scrollTop == document.height）{//突出顯示我的最後一個元素}' – Samich

這個代碼設置adults活躍，當你滾動頁面到最後：

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

來源

2013-08-01 21:01:38 Raidri

太棒了 - 那真的謝謝！ – Mark

可選您可以嘗試把東西放在底部（底部邊距可能會起作用）或

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

來源

2013-08-08 05:30:51 prince

垂直菜單固定活動類

回答

相關問題