仿iphone通信录滑动时修改固定标题

仿iphone通信录滑动时修改固定标题

1，效果演示

2，思路

1, 开始时，去获取到滚动列表中，每一个标题的偏移值，并保存起来

2，监听列表的滚动，以顶部固定的标题为基点，当这个基点在某个列表区域内的时候，那么固定的基点名称就显示所在区域的标题名称

3，代码实现

1,保存滚动列表中每组标题的偏移值

                var list = $('.integral-wrap .list-warp'),

                    i = 0,

                    // 偏移量，这个值表示,页面布局中，固定的标题和Tab项的高度值
                    // 因为下面使用了 offset() 获取每组标题相对于当前视口的偏移量
                    OFFSET = 127.421875,

                    item;

                // 重置缓存内容
                cache_pois = [];

                for( ; item = list[i++] ; ) {
                    var $item = $(item),
                        poi = $item.offset().top - OFFSET,
                        flg = $item.find('.title-icon').html();

                    //保存偏移量的值到缓存中
                    cache_pois.push({ poi : poi, flg : flg });
                }

2，监听滚动列表，返回当前基点所在区域的位置和标题名称

            var 
                cache, i = 0,

                poi = {poi : 0, flg : ""},

                // 当前点的位置
                curPoi = cache_pois[0] ? cache_pois[0] : poi,

                // 新的点位置，或则认为是下一个标题的位置
                nextPoi = cache_pois[1] ? cache_pois[1] : poi;

            return function( curLocation ){

                var len = cache_pois.length;
                if( len < 2 || i >= len  ) return curPoi;

                // console.log( curLocation, nextPoi.poi )

                // 当滚动的位置点大于等于当前点的位置并且小于下一个位置点
                // 当基点还在当前区域内
                if( curLocation >= curPoi.poi && curLocation <= nextPoi.poi ){

                    return curPoi;

                // 当基点超出当前区域（列表向下滚动）
                } else if( curLocation > nextPoi.poi ) {

                    curPoi = nextPoi;
                    i++;
                    nextPoi = cache_pois[ i + 1 ];

                // 当基点向回滚动的时候
                } else if( curLocation <= curPoi.poi ) {

                    nextPoi = curPoi;
                    i--;
                    curPoi = cache_pois[ i ]
                }

                return curPoi;

            }

3，监听的方法

                if( cache_pois.length <= 0 ) return;

                var top = $(this).scrollTop();

                var title = getCurTitleFn( top );

                // console.log( title.flg , oldTitle)
                if( title.flg !== oldTitle ) {
                    $title.html( title.flg );
                    oldTitle = title.flg || null;
                }

在此做了优化，不能频繁的修改 DOM 元素的值，使用oldTitle来标记，若新的标题还等于上次保存的标题名，就不做修改。

完整代码下载地址：github下载

转载于:https://www.cnblogs.com/zhiyuan-2011/articles/5126270.html