仿苹果手机通讯录字母固定在屏幕顶部的效果

最新推荐文章于 2020-11-14 02:32:07 发布

Leo-hzj

最新推荐文章于 2020-11-14 02:32:07 发布

阅读量803

点赞数

分类专栏： javascript jquery 文章标签：仿苹果手机通讯录字母固定在顶部固定导航条导航条 jquery固定导航条 jquery

本文链接：https://blog.youkuaiyun.com/q36835109/article/details/78647419

版权

javascript 同时被 2 个专栏收录

11 篇文章

订阅专栏

jquery

4 篇文章

订阅专栏

本文介绍如何创建一个仿苹果手机通讯录的页面效果，重点在于字母导航条在滚动时能始终保持在屏幕顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直在忙，很久没有来写博客了！下面分享一个仿苹果手机通讯字母固定在屏幕顶部的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>仿苹果手机通讯录字母固定在屏幕顶部</title>
</head>
<style type="text/css">
    *{
        margin:0;
        padding:0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .container{
        margin: 0 auto;
        width:100%;
    }

    .container .nav{
        width:100%;
        height:60px;
        background:#66bb6a;
        border:3px solid #000000;
        position: relative;
    }

    .container .nav.bg{
        background:#00a0e9;
    }

    .container .nav.se{
        height:100px;
    }

    .container .nav.se2{
        height:200px;
    }

    .container .nav.nav-fixed{
        position: fixed;
        top:0;
    }

    .container .s-mg{
        height:100px;
    }

    .container .mg{
        height:500px;
    }
</style>
<body>
<div class="container">
    <div class="s-mg"></div>
    <div class="nav">1</div>
    <div class="mg"></div>
    <div class="nav bg">2</div>
    <div class="mg"></div>
    <div class="nav se">3</div>
    <div class="mg"></div>
    <div class="nav bg">4</div>
    <div class="mg"></div>
    <div class="nav se2">5</div>
    <div class="mg"></div>
    <div class="nav bg">6</div>
    <div class="mg"></div>
    <div class="mg"></div>
</div>

<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    ;(function(){
        var obj = {
            scrollTopArr : [],
            initScroll : $(window).scrollTop(),
            prevIndex : -1,
            nextIndex : 0,
            init : function(){
                return obj;
            },
            run : function(param){
                var defaultParam = {
                    el : ".nav",
                    cl : "nav-fixed"
                };
                var tempParam = $.extend(defaultParam,param);

                if(tempParam.el === ""){
                    alert('缺少参数');
                    return false;
                }else if(tempParam.cl === ""){
                    alert('缺少参数');
                    return false;
                }

                obj.getAllElement(tempParam);
                obj.initPosition(tempParam);
                obj.winRoll(tempParam);
            },
            getAllElement : function(param){
                $(param.el).each(function(){
                    var tempObj = {};
                    var targetHeight = $(this).height();
                    $(this).wrap('<div style="height:'+(targetHeight+'px')+'"></div>');

                    tempObj.height = targetHeight;
                    tempObj.distanceTop = $(this).offset().top;

                    obj.scrollTopArr.push(tempObj);
                });
            },
            initPosition : function(param){
                var h = '';
                var mg = '';
                var arrLen = obj.scrollTopArr.length;
                $.each(obj.scrollTopArr,function(i,e){
                    if(i-1 >= 0){
                        h = obj.scrollTopArr[i-1].height;
                    }else{
                        h = obj.scrollTopArr[i].height;
                    }

                    mg = (obj.initScroll+h) - e.distanceTop;

                    if(obj.initScroll < e.distanceTop){
                        obj.nextIndex = i;
                        if(i === 0){
                            return false;
                        }else{
                            if(mg <= h){
                                $(param.el+":eq("+(i-1)+")").css('top','-'+mg+'px');
                            }else{
                                $(param.el+":eq("+(i-1)+")").css('top','0');
                            }
                            $(param.el).removeClass(param.cl);
                            $(param.el+":eq("+(i-1)+")").addClass(param.cl);
                        }
                        return false;
                    }else{
                        obj.nextIndex = arrLen-1;
                        if(mg <= h){
                            $(param.el+":eq("+(i-1)+")").css('top','-'+mg+'px');
                        }else{
                            $(param.el+":eq("+(i-1)+")").css('top','0');
                        }
                        if(i === (obj.scrollTopArr.length-1)){
                            $(param.el).removeClass(param.cl);
                            $(param.el+":eq("+i+")").addClass(param.cl);
                        }
                    }
                });
            },
            winRoll : function(param){
                $(window).scroll(function() {
                    var st = $(this).scrollTop();
                    var h = '';
                    var mg = '';
                    if (obj.initScroll < st) {
                        $.each(obj.scrollTopArr,function(i,e){
                            if(i-1 >= 0){
                                h = obj.scrollTopArr[i-1].height;
                            }else{
                                h = obj.scrollTopArr[i].height;
                            }

                            mg = (st+h) - e.distanceTop;

                            if(mg <= h){
                                $(param.el + ":eq(" + (i - 1) + ")").css('top', '-' + mg + 'px');
                            }else{
                                $(param.el+":eq("+(i-1)+")").css('top','0');
                            }

                            if(st - e.distanceTop >= 0) {
                                if(i > obj.prevIndex){
                                    $(param.el).removeClass(param.cl);
                                    $(param.el+":eq("+i+")").addClass(param.cl);
                                    obj.prevIndex = i;
                                    obj.nextIndex = i;
                                }
                            }
                        });
                        obj.initScroll = st;
                    }

                    if (obj.initScroll > st) {
                        obj.prevIndex = -1;
                        $.each(obj.scrollTopArr,function(i,e){
                            if(i-1 >= 0){
                                h = obj.scrollTopArr[i-1].height;
                            }else{
                                h = obj.scrollTopArr[i].height;
                            }

                            mg = (st+h) - e.distanceTop;

                            if(mg <= h){
                                $(param.el+":eq("+(i-1)+")").css('top','-'+mg+'px');
                            }else{
                                $(param.el+":eq("+(i-1)+")").css('top','0');
                            }

                            if(e.distanceTop - st >= 0) {
                                if(i === obj.nextIndex){
                                    obj.nextIndex--;
                                    if(obj.nextIndex > -1){
                                        $(param.el).removeClass(param.cl);
                                        $(param.el+":eq("+obj.nextIndex+")").addClass(param.cl);
                                    }else if(obj.nextIndex === -1){
                                        $(param.el).removeClass(param.cl);
                                    }
                                }
                            }
                        });
                        obj.initScroll = st;
                    }
                });
            }
        };
        window.fixedNav = new obj.init();
    })();

    fixedNav.run({
        el : ".nav",
        cl : "nav-fixed"
    });
</script>
</body>
</html>

复制代码到HTML文件即可查看效果！