【问题标题】:Menu ul style change on scroll to div滚动到 div 时菜单 ul 样式更改
【发布时间】:2013-05-17 08:18:02
【问题描述】:
我有一个菜单,其中包含 ul 和下面的框作为内容,当我滚动到第一个框 ul 的样式更改为另一种样式时,当我滚动到第二个框 ul 的样式更改为相同的另一种样式和第一个 ul风格回到原来的风格,就像那样。
问题是当我到达页面末尾时,有空间并且所有 uls 样式都应该返回到它的原始样式但是 jquery 代码的问题是最后一个 ul 样式(对于最后一个框)仍然像我一样在最后一个盒子上。
正如您在http://ge.tt/1yoq2sg/v/0?c 看到的那样,当我到达页面末尾时,菜单中的每个 ul 样式都应该是原始样式,但事实并非如此。
您也可以下载该文件。
【问题讨论】:
标签:
jquery
css
html
scroll
【解决方案1】:
我添加了一个变量endpoint,它被设置为最终div的偏移量加上div的高度,当页面滚动超过这个时,menutext2类被删除。
$(function(){
var offsets = [],
menuText = $('#menu .menuText'),
endpoint;
$("div.contentDiv").each( function(i, div) {
if(i==$("div.contentDiv").length-1){endpoint=$(div).offset().top+$(div).outerHeight();}
offsets.push({ id: div.id, offset: $(div).offset().top - 60});
});
$(window).scroll(function(e) {
var start = $(this).scrollTop();
var end = $(this).scrollTop();
for ( var div = 0; div < offsets.length; div++ ) {
if ( start > offsets[div].offset ) {
menuText.removeClass('menutext2').addClass('menutext');
menuText.filter('[linkId="'+offsets[div].id+'"]').addClass('menutext2').removeClass('menutext');
}
}
if ( start === 0 || $(this).scrollTop()>endpoint) {
menuText.removeClass('menutext2').addClass('menutext');
}
});
});