这有一个小练习 判断条件的不知该怎么写 求助!

问与答 huanlihu 发表于 4 月前

jquery遍历 页面所有的class名叫tou的div 当 tou滚动到顶部时添加一个class名gao 当离开顶部时去除class gao

代码可以直接复制运行
<html>
<head>
<meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .phet{
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .div{
        height: 44px;
        border: 1px solid red;
        text-align: center;
        line-height: 44px;
        background: #EFEFF4;
        width: 100%;
    }
    .gao{
        position: fixed;
        z-index: 99;
        top: 0;
    }

</style>
<body>
    <div class="madin">
        <div class="tou">
            <p>这是第一个div</p>
        </div>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <div class="tou">
            <p>这是第二个div</p>
        </div>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <div class="tou">
            这是第三个div
        </div>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
        <p class="phet">加一些没用的可以撑起页面让页面滚动</p>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

        $(document).ready(function(){
                //获取定位元素距离浏览器顶部的距离

            $(window).scroll(function(){
                //获取滚动条的滑动距离
                var scroH = $(this).scrollTop();

                        // 分别获取ding的top
                    $(".tou").each(function(index, ele) {//遍历所有的ding
                        //获取div距离顶部页面的距离
                        $(this).data('top', $(this).offset().top)

                    // scroll里面, 需要分别判断top

                        if ($(this).data('top') - scroH < 42 ) {
                            if (!$(this).hasClass('gao')) {
                                $(this).addClass('gao').css("z-index","99");
                            }

                        } else if($(this).data('top') - scroH >  42 ) {

                            $(this).removeClass('gao').css("z-index","0");
                        }
                    })
                });
            });




    </script>

</html>

暂无回复,说出你的观点吧
登录后即可参与回复