求大神帮忙！！ JQ JS的函数调用问题

仅小鱼 2015-08-26 01:37:44

这个通过判断页面位置来调用新的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");
}
});

...全文

122 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

仅小鱼 2015-08-26

打赏
举报

引用 2 楼 KK3K2005 的回复:

失败～～～说具体的不要说形容词

我在处理CSS3动效时候遇到的不能调用这个函数addClass的值我是想通过监控页面的位置来触发CSS3的动效达到动态效果

仅小鱼 2015-08-26

打赏
举报

引用 3 楼 DaveLeeCN 的回复:

addClass不会移除已存在的class属性，只会在class中添加属性，按F12自己查看一下元素，看有没有添加class，然后再打印t1、t2几个值看看是不是判断出问题了

我审查元素发现是没有调用后面的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>