87,919
社区成员
发帖
与我相关
我的任务
分享求大神帮忙！！ JQ JS的函数调用问题
这个通过判断页面位置来调用新的css类“aas/bbs/ccs” 可是测试调用失败 哪位大神能帮我分析一下代码哪块出问题了 ！！！
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
var t1=$("#a").offset().top;
var t1=$("#b").offset().top;
var t1=$("#c").offset().top;
$(window).scroll(function(event){
var top=$(window).scrollTop();
if(top>t1&&top<t2){
$(".aa").addClass("aas");
}
if(top>t2&&top<t3){
$(".bb").addClass("bbs");
}
if(top>t3){
$(".aa").addClass("ccs");
}
});
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
var t1=$("#a").offset().top;
var t1=$("#b").offset().top;
var t1=$("#c").offset().top;
$(window).scroll(function(event){
var top=$(window).scrollTop();
if(top>t1&&top<t2){
$(".aa").addClass("aas");
}
if(top>t2&&top<t3){
$(".bb").addClass("bbs");
}
if(top>t3){
$(".aa").addClass("ccs");
}
});
...全文
请发表友善的回复…
发表回复
仅小鱼 2015-08-26
- 打赏
- 举报
我在处理CSS3动效时候遇到的 不能调用这个函数addClass的值 我是想通过监控页面的位置来触发CSS3的动效达到动态效果
仅小鱼 2015-08-26
- 打赏
- 举报
我审查元素发现 是没有调用 后面的class的属性并没有添加进去 说明没有调用成功。
DaveLeeCN 2015-08-26
- 打赏
- 举报
addClass不会移除已存在的class属性，只会在class中添加属性，按F12自己查看一下元素，看有没有添加class，然后再打印t1、t2几个值看看是不是判断出问题了
KK3K2005 2015-08-26
- 打赏
- 举报
失败～～～
说具体的 不要说形容词
豪情 2015-08-26
- 打赏
- 举报
刚开始t1,t2,t3变量写错了。
var t1=$("#a").offset().top;
var t2=$("#b").offset().top;
var t3=$("#c").offset().top;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.js"></script>
<style type="text/css">
*{ margin:0; padding:0; }
body{ font:12px/1.125 Arial, Helvetica, sans-serif; background:#fff; }
a{ color:#0a8cd2; text-decoration:none; }
a:hover{ text-decoration:underline; }
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{ display:inline-block; }
.clearfix{ display:block; }
.clear{ clear:both; height:0; font:0/0 Arial; visibility:hidden; }
.none{ display:none }
div{ border:1px solid red;}
.a,.b,.c{ position:absolute;left: 0; height:150px;}
.a{ top:200px; border:1px solid #c00;}
.b{ top:600px; border:1px solid #cc0;}
.c{ top:800px; border:1px solid #0cc;}
</style>
</head>
<body>
<div id="a" class="a">a</div>
<div id="b" class="b">b</div>
<div id="c" class="c">c</div>
<div style="height: 3000px;"></div>
<script>
var t1=$("#a").offset().top;
var t2=$("#b").offset().top;
var t3=$("#c").offset().top;
$(window).scroll(function(event){
var top=$(window).scrollTop();
console.log('t', top);
console.log('t1', t1);
console.log('t2', t2);
if(top>t1&&top<t2){
$(".a").addClass("aas");
}
if(top>t2&&top<t3){
$(".b").addClass("bbs");
}
if(top>t3){
$(".c").addClass("ccs");
}
});
</script>
</body>
</html>
