经常在网页中看到这样一种效果，当页面滚动一段距离后，页面中的某个部分固定在一个区域(通常是头部导航)，这种效果一般称为Sticky Header，如下图所示：

上述操作在Android系统中非常好实现，只需要监听onscroll事件并将实现逻辑写在里面即可，但iOS则不一样，它在页面scroll的时候，是不会执行代码的，直到页面停下来为止。

如此一来上面的效果就比较难实现了，因为不能实时更新导航条的位置，所以用户体验会与Android系统不一致。经过查阅资料，大概找了几种解决方案：

  1. 在iOS中同时监听onscroll与ontouchmove(然而尝试过后效果不好，特别是在屏幕上飞快地划一下然后把手指松开的时候)；
  2. 自己模拟实现页面滚动，或者使用iScroll.js(感觉比较复杂没有试过)；
  3. 使用postion:sticky属性(最终采用了这个，因为简单而且性能也好)；

position:sticky是CSS3中新增的样式，它的表现相当于position:relative和position:fixed的集合，当目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。比如：

.header{

    position:-webkit-sticky;

    position:sticky;

    top:0

}

当header滚动出可视窗口外时，它就会执行position:fixed操作，并定位在top:0的位置。当header重新出现在视口内时，它执行position:relative操作，看起来就像元素仍然在原来的位置。

以上经过3GS真机测试并且测试通过。测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Sticky Header for iOS</title>

    <style>

        body{

            margin: 0;

            color: #ffffff;

        }

        .banner{

            height: 100px;

            background-color: #3b9a90;

        }

        .header{

            height: 30px;

            line-height: 30px;

            background-color: #daac76;

            position: -webkit-sticky;

            position: sticky;

            top:0;

        }

        .content{

            background-color: #557b4d;

            height: 900px;

            padding: 10px;

            line-height: 24px;

            text-indent:2em;

        }

    </style>

</head>

<body>

    <div class="banner">banner</div>

    <div class="header">navigation</div>

    <div class="content">A young man was getting ready to graduate from college. For many months he had admired a beautiful sports car in a dealer's showroom, and knowing his father could well afford it, he told him that was all he wanted.

        As Graduation Day approached, the young man awaited signs that his father had purchased the car. Finally, on the morning of his graduation, his father called him into his private study. His father told him how proud he was to have such a fine son, and told him how much he loved him. He handed his son a beautiful wrapped gift box. Curious, but somewhat disappointed, the young man opened the box and found a lovely, leather-bound Bible, with the young man's name embossed in gold. Angrily, he raised his voice to his father and said, "With all your money you give me a Bible?" He then stormed out of the house, leaving the Bible.

        Many years passed and the young man was very successful in business. He had a beautiful home and a wonderful family, but realizing his father was very old, he thought perhaps he should go to see him. He had not seen him since that graduation day. Before he could make the arrangements, he received a telegram telling him his father had passed away, and willed all of his possessions to his son. He needed to come home immediately and take care of things.

        When he arrived at his father's house, sudden sadness and regret filled his heart. He began to search through his father's important papers and saw the still new Bible, just as he had left it years ago. With tears, he opened the Bible and began to turn the pages. As he was reading, a car key dropped from the back of the Bible. It had a tag with the dealer's name, the same dealer who had the sports car he had desired. On the tag was the date of his graduation, and the words... "PAID IN FULL".

        How many times do we miss blessings because they are not packaged as we expected? Do not spoil what you have by desiring what you have not; but remember that what you now have was once among the things you only hoped for.

        Sometimes we don't realize the good fortune we have or we could have because we expect "the packaging" to be different. What may appear as bad fortune may in fact be the door that is just waiting to be opened.</div>

</body>

</html>

如果要在onscroll里实时执行逻辑操作，以上代码就力不从心了，只能找别的解决方案。

在iOS中实现sticky header的更多相关文章

  1. RSA算法及其在iOS中的使用

    因为项目中需要传输用户密码,为了安全需要用RSA加密,所以就学习了下RSA加密在iOS中的应用. 关于RSA的历史及原理,下面的两篇文章讲的很清楚了:  http://www.ruanyifeng.c ...

  2. 在iOS中创建静态库

    如果您有不错的原创或译文,欢迎提交给我们,更欢迎其他朋友加入我们的翻译小组(联系qq:2408167315).  =========================================== ...

  3. iOS中解析 XML / JSON

    JSON数据格式 1. 概述: JSON (JavaScript Object Notation) 是⼀一种轻量级的数据交换格式 基于⽂文本格式,易于⼈人阅读和编写,同时也易于机器解析和⽣生成. 2. ...

  4. iOS中忽略NSLog打印信息(通过PCH文件中定义DEBUG宏解决)

    iOS中忽略NSLog打印信息 解决办法: 1.新建PrefixHeader_pch文件,在该文件中定义一下宏 //通过DEBUG宏的定义来解决Debug状态下和Release状态下的输出 #ifde ...

  5. OS X 和iOS 中的多线程技术（上）

    OS X 和iOS 中的多线程技术(上) 本文梳理了OS X 和iOS 系统中提供的多线程技术.并且对这些技术的使用给出了一些实用的建议. 多线程的目的:通过并发执行提高 CPU 的使用效率,进而提供 ...

  6. OS X 和iOS 中的多线程技术（下）

    OS X 和iOS 中的多线程技术(下) 上篇文章中介绍了 pthread 和 NSThread 两种多线程的方式,本文将继续介绍 GCD 和 NSOperation 这两种方式.. 1.GCD 1. ...

  7. iOS中UIWebView执行JS代码(UIWebView)

    iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...

  8. iOS 中 .a 和 .framework 静态库的创建与 .bundle 资源包的使用

    iOS 中 .a 和 .framework 静态库的创建与 .bundle 资源包的使用 前言 开发中经常使用三方库去实现某特定功能,而这些三方库通常又分为开源库和闭源库.开源库可以直接拿到源码,和自 ...

  9. 关于iOS中几种第三方对XML/JSON数据解析的使用

    Json XML 大数据时代,我们需要从网络中获取海量的新鲜的各种信息,就不免要跟着两个家伙打交道,这是两种结构化的数据交换格式.一般来讲,我们会从网络获取XML或者Json格式的数据,这些数据有着特 ...

随机推荐

  1. 贪心+数学【p3156】 [CQOI2011]分金币 ([HAOI2008]糖果传递)

    题目描述 圆桌上坐着n个人,每人有一定数量的金币,金币总数能被n整除.每个人可以给他左右相邻的人一些金币,最终使得每个人的金币数目相等.你的任务是求出被转手的金币数量的最小值. 分析: 设: 每个人最 ...

  2. 线段树【p1115】 最大子段和

    题目描述-->p1115 最大子段和 虽然是一个普及-的题,但我敲了线段树 qwq 数组定义 \(lsum[ ]\)代表 该区间左端点开始的最大连续和. \(rsum[ ]\)代表 该区间右端点 ...

  3. UIActivityIndicatorView活动指示器

    活动指示器(UIActivityIndicatorView)可以告知用户有一个操作正在进行中.派生自UIView,所以他是视图,也可以附着在视图上. 一.创建 UIActivityIndicatorV ...

  4. 【mybatis】in查询+判断list查询条件是否进行in查询

    mybatis中的in查询: 并且判断in查询的list是否为null或者list有值才进行In查询 <select id="find" parameterType=&quo ...

  5. DotnetBrowser高级教程-（4）使用MVC框架4-过滤器

    dotnetbrowser内置了过滤器,所谓过滤器,就是实现了Action前后拦截,请看下例: 1.增加目录Filters,在该目录下增加新的过滤器PerformanceFilter,代码如下: pu ...

  6. 为什么输入shutdown -h -t会报错：command not fount

    如果是直接用普通用户($)的身份进行输入[user@localhost ~]$ shutdown -h -t 是不能执行,因为普通用户没有关闭机器的权限. 然而直接使用[user@localhost ...

  7. appium 几点总结(转)

    1. 建立session时常用命令: DesiredCapabilities cap = new DesiredCapabilities(); cap.SetCapability("brow ...

  8. 新人补钙系列教程之：Molehill底层API中最重要的Context3D

    Context3D,是一个三维空间的处理环境,负责创建并处理三维对象的各个要素如顶点.片段.透视等等,并将处理的结果使用AGAL(Adobe图形汇编语言)上传给显卡进行运算,运算结果最终被回传给CPU ...

  9. 机器学习入门之四：机器学习的方法--SVM（支持向量机）（转载）

    转自 飞鸟各投林 SVM(支持向量机) 支持向量机算法是诞生于统计学习界,同时在机器学习界大放光彩的经典算法. 支持向量机算法从某种意义上来说是逻辑回归算法的强化:通过给予逻辑回归算法更严格的优化条件 ...

  10. SparkMLlib聚类学习之KMeans聚类

    SparkMLlib聚类学习之KMeans聚类 (一),KMeans聚类 k均值算法的计算过程非常直观: 1.从D中随机取k个元素,作为k个簇的各自的中心. 2.分别计算剩下的元素到k个簇中心的相异度 ...