请教一个JQuery问题，为什么当页面划到最底部的时候JS就失效了
<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title><style>*{margin:0;...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* { margin:0; padding:0;}
.one { color:#0FC;}
ul { list-style:none;}
#slid ul li { height:1000px;}
#nav { height:50px; width:600px; position:fixed; left:50%; margin-left:-300px;}
#nav ul li { width:100px; height:50px; background:#CCC; float:left;}
#nav ul li.active { background:#F00;}
</style>
<script src="/js/jquery-1.6.4.js" type="text/javascript">
</script>
<script>
//还有就是我想让页面刷新的时候也触发这个JS，就像原生的window.onload=window.onscroll=function(){}一样
$(document).ready(function(){
$(document).scroll(function(){
$("#slid li").each(function(){
var aElel = $(this).offset().top;
var aVal =$(document).scrollTop();
if(aElel == aVal) {
$("#nav ul li").removeClass('active');
$("#nav ul li").eq($(this).index()).addClass("active")
}
});
})
})
</script>
</head>
<body>
</div>
<div id="nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
</div>
<div style="height:500px;"></div>
<div id="slid">
<ul>
<li><a href="###">链接1</a></li>
<li><a href="###">链接2</a></li>
<li><a href="###">链接3</a></li>
<li><a href="###">链接1</a></li>
<li><a href="###">链接5</a></li>
<li><a href="###">链接6</a></li>
</ul>
</div>
</body>
</html> 展开
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* { margin:0; padding:0;}
.one { color:#0FC;}
ul { list-style:none;}
#slid ul li { height:1000px;}
#nav { height:50px; width:600px; position:fixed; left:50%; margin-left:-300px;}
#nav ul li { width:100px; height:50px; background:#CCC; float:left;}
#nav ul li.active { background:#F00;}
</style>
<script src="/js/jquery-1.6.4.js" type="text/javascript">
</script>
<script>
//还有就是我想让页面刷新的时候也触发这个JS，就像原生的window.onload=window.onscroll=function(){}一样
$(document).ready(function(){
$(document).scroll(function(){
$("#slid li").each(function(){
var aElel = $(this).offset().top;
var aVal =$(document).scrollTop();
if(aElel == aVal) {
$("#nav ul li").removeClass('active');
$("#nav ul li").eq($(this).index()).addClass("active")
}
});
})
})
</script>
</head>
<body>
</div>
<div id="nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
</div>
<div style="height:500px;"></div>
<div id="slid">
<ul>
<li><a href="###">链接1</a></li>
<li><a href="###">链接2</a></li>
<li><a href="###">链接3</a></li>
<li><a href="###">链接1</a></li>
<li><a href="###">链接5</a></li>
<li><a href="###">链接6</a></li>
</ul>
</div>
</body>
</html> 展开
1个回答
展开全部
fuwei945,你好
看了下你的页面,我猜测你的需求是slid这个div中哪个li可见,就在nav中对应序号的li上添加上active样式.
如果是这样的话,你的逻辑稍微有点问题,以下这个判断
if(aElel == aVal)
只有在li的上边沿刚好停留在浏览器窗口的上方,和最上方那条线重合的时候才成立.
而当你把滚动条拉到浏览器最下方再向上拉的时候,因为浏览器默认的滚动最小单位值(滚动并不是连续的,而是滚动条一动一个固定像素值后浏览器显示部分才动一下),所以之后slid的每个li的上边沿将不会再和显示区域上边重合,所以看上去的JS失效了.
我提供给你一个样例,能实现我猜测你所需的效果,供你参考下思路.
var extraHeight,perHeight;
$(document).ready(function(){
extraHeight=$('#nav').next().outerHeight();//这个是nav之后的那个div的高度
perHeight=$('#slid ul li').outerHeight();//这个是slid中每个li的高度
$(document).scroll(scrollListener);//添加滚动条滚动监听
scrollListener();//此处显示调用一下方法,以满足你注释中提的需求
});
//将监听滚动条滚动的方法独立出来,好在页面加载完成后调用
function scrollListener(){
var aVal =$(document).scrollTop();
$("#nav ul li").removeClass("active");//先将所有li上的active样式去掉
$("#nav ul li").eq(markTheVisibleIndexLi(aVal,extraHeight,perHeight)).addClass("active");//在当前显示的li对应的块上加上active样式
}
//以下的方法是用来计算当前显示的li的序号(index)的
function markTheVisibleIndexLi(scrollTop,extraHeight,perHeight){
//当前窗口滚动条滚动距离 减去 nav之后那个div占用的高度
//除以每个li的高度,然后将结果的小数部分舍弃
//就得到了当前能看到的那个li的序号
return Math.ceil((scrollTop-extraHeight)/perHeight);
}
以上代码替换掉你的<script>块中全部代码再执行了看看.
如果还未解决你问题请追问,或百度私信我,3q~_~.
追问
非常感谢，但是IE6方面能否再讲解一下
追答
IE6下边存在两个问题,
第一个是position:fixed 这个css样式不被支持,你可以使用这个替换掉之前的#nav,具体位置调整请自行实现
#nav {
height:50px;
width:600px;
z-index: 100;/*设置浮动层次*/
overflow: visible;
position: fixed;
top: 0px;/* 其他浏览器下定位，在这里可设置坐标*/
_position: absolute;/*IE6 用absolute模拟fixed*/
_top: expression(documentElement.scrollTop); /*IE6 动态设置top位置*/
/* documentElement.scrollTop 设置浮动元素始终在浏览器最顶，可以加一个数值达到排版效果 */
left:300px;
}第二个问题是scroll监听如果加在document上,在IE6下边是有问题的,这涉及到了docType,MIME type的设置对浏览器渲染模式的影响这个主题上,在此讨论实在有点地方不够,不过如果你将监听加在window对象上,是可以正常触发scroll事件的,替换的代码如下:
$(window).scroll(scrollListener);//原来是$(docuemnt).scroll(....
BTW:淘汰IE6,从我做起....
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
