仿苹果手机通讯录字母固定在屏幕顶部的效果
2024-07-04 07:46:40
一直在忙，很久没有来写博客了！下面分享一个仿苹果手机通讯字母固定在屏幕顶部的效果。
<!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文件即可查看效果！
仿苹果手机通讯录字母固定在屏幕顶部的效果相关推荐
- 仿苹果手机通讯录按字母定位
当初写这个的时候,是因为开发移动端项目的时候使用的,虽然PC端也能用,不过效果就没那么好了.大家如果需要的,可以自己修改一下代码使用.. 下面就直接上代码了... <!DOCTYPE html& ...
- html 字母列表通讯录,仿微信通讯录字母排序列表
先看下效果图 Gif_20180425_103334.gif 在这里我们先分析下效果,左边是一个按照字母排序的并有子列表,右边是直接一个字母的排列,屏幕中间有一个显示你点击了右边的那个字母的显示. 在 ...
- ionic 实现仿苹果手机通讯录搜索功能
前言 由于之前做的SRM移动应用采用的是ionic1.x框架进行开发的,由于性能方便的诟病,导致用户体验不是很友好,于是想着怎么样去提高应用的性能问题.此时刚好ionic3.x框架已发布,由于ioni ...
- android 字母搜索栏,android仿微信通讯录搜索示例(匹配拼音,字母,索引位置)
前言: 仿微信通讯录搜索功能,通过汉字或拼音首字母找到匹配的联系人并显示匹配的位置 一:先看效果图 字母索引 搜索匹配 二:功能分析 1:汉字转拼音 通讯录汉字转拼音(首个字符当考虑姓氏多音字), 现 ...
- android 通讯录 首字母索引,android仿微信通讯录搜索(匹配拼音,字母,索引位置标记颜色)...
前言: 仿微信通讯录搜索功能,通过汉字或拼音首字母找到匹配的联系人并显示匹配的位置 一:先看效果图 字母索引 搜索匹配 二:功能分析 1:汉字转拼音 通讯录汉字转拼音(首个字符当考虑姓氏多音字), 现 ...
- 【Android 仿微信通讯录 导航分组列表-上】使用ItemDecoration为RecyclerView打造带悬停头部的分组列表
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/52355199 本文 ...
- 【uniapp前端组件】仿微信通讯录列表组件
仿微信通讯录列表组件 示例图 前言 仿微信通讯录列表组件,可实现通讯列表以及选择多个联系人功能. 组件介绍 本组件有三个自定义组件构成,都已经集成在bugking7-contact-list中,该组件 ...
- html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定.页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置.这种效果怎么实现呢 2.. ...
- Flutter布局锦囊---屏幕顶部提醒
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "提醒页面",显示在屏幕上方的文字提醒页面,不会覆盖原路由页面. "路由导航",使用Flutter的路 ...
最新文章
- vim编辑器异常退出产生备份文件
- win2003系统+IIS6下，经常出现w3wp.exe和sqlserver.exe的内存占用居高不下
- 人性 - 社会 - 经济 - 科学
- SVN 放弃修改或撤销删除
- LVS+KEEPALIVED+nginx 7
- php 建立自己的框架,利用 Composer 一步一步构建自己的 PHP 框架（一）——基础准备...
- C++语言基础 —— STL —— 容器与迭代器 —— list 与 deque
- 拒绝空谈 AI 设想！手把手教你构建实时、高可用的 AI 调度平台
- 基于vue axios element-ui 的 demo
- sqlserver_identity
- 结对编程-四则运算生成
- IntelliJ IDEA 2019.1 EAP5 发布，Maven 构建输出统一查看
- PIC单片机的C语言程序基本框架,PIC单片机的基本编程汇总，初学者必看
- 系统集成项目管理工程师（软考中级）知识点总结【挣值分析】【关键路径】
- html5 随机抽奖,jQuery+H5按空格键随机抽奖代码
- 机器人开发--AGV控制系统
- 独孤九剑之SQL调优
- 李沐动手学深度学习V2-RNN循环神经网络从零实现
- canal.admin、adapter和deployer的区别
- BI工具是什么，有什么用，怎么用？
热门文章
- CodeForces 215E Periodical Numbers 数位DP
- php对象的序列化和反序列化
- html 避免重复点击,js点击事件防止用户重复点击执行
- 干货：一招教你如何撰写美食品鉴或美食展销方案
- 笔记本onenote绘画快捷键_OneNote 超全快捷键_笔记本onenote绘画快捷键
- Kerberos报错：kinit: Password incorrect while getting initial credentials
- 红队渗透靶场之SickOs1.1
- 记录一下夏普S2手机的解锁以及root的痛苦历程
- 配置dns问题server can‘t find .com: SERVFAIL
- 成绩排名次(C++题解）