我有一个带有垂直菜单的页面,菜单链接到页面上的节段元素。我的目标是在滚动到该元素时,给
这一切都很好运作,但是页面上的最后一个部分元素永远无法到达顶部,因此类别“active”保留在上一个元素上。
我该如何使最后一个元素在滚动到时成为活动状态?
菜单:
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>
if (window.height + window.scrollTop == document.height) { // highlight my last element }
- Samich