日期:2014-05-16  浏览次数:20486 次

导航栏状态变化的问题。
悬浮的导航栏,当滚轮滑动,看到相应的模块,导航栏的样式改变。
用firebug的console.log()发现scroll给出的数据不是连续的,而我判断到达某个模块是==0来判断的。
你们有什么好办法。
滚轮滑动越快,测出来的2个距离数字差距越大,说明是同一个时间间隔测出来的。

-38
index.js (第 12 行)
-30
index.js (第 12 行)
-23
index.js (第 12 行)
-16
index.js (第 12 行)
-8
index.js (第 12 行)
-2
index.js (第 12 行)
4
index.js (第 12 行)
8
index.js (第 12 行)
12
index.js (第 12 行)
13
index.js (第 12 行)
14
index.js (第 12 行)
19


$(window).scroll(function(){
var top_news = document.getElementById("news").getBoundingClientRect().top;//元素顶端到可见区域顶端的距离
var top_application = document.getElementById("application").getBoundingClientRect().top;
var top_product = document.getElementById("product").getBoundingClientRect().top; 
var top_about = document.getElementById("about").getBoundingClientRect().top;
var top_marketing = document.getElementById("marketing").getBoundingClientRect().top;
var top_mall = document.getElementById("mall").getBoundingClientRect().top;
console.log(top_application);
if(top_news ==0) {
alert("到达资讯中心");
$(".oybnav").find("a").removeClass("oybselected");
$("#navli2").find("a").addClass("oybselected");
};
if(top_application ==0) {
alert("到达应用中心");
$(".oybnav").find("a").removeClass("oybselected");
$("#navli3").find("a").addClass("oybselected");
};
if(top_product ==0) {
alert("到达我们的产品");
$(".oybnav").find("a").removeClass("oybselected");
$("#navli4").find("a").addClass("oybselected");
};
if(top_about ==0) {
alert("到达关于我们");
$(".oybnav").find("a").removeClass("oybselected");
$("#navli5").find("a").addClass("oybselected");
};
if(top_marketing ==0) {
alert("到达市场营销");
$(".oybnav").find("a").removeClass("oybselected");
$("#navli6").find("a").addClass("oybselected");
};
if(top_mall ==0) {
alert("到达商城");
$(".oybnav").find("a").removeClass("oybselected");
$("#navli8").find("a").addClass("oybselected");
};
});


------解决方案--------------------
本帖最后由 showbo 于 2014-04-26 17:13:20 编辑
再可见范围内就好了,不可能精准到你的控件的top所在位置

参考:jquery实现章节目录效果