Webview 和 React Native 中吸顶效果实现

一、前言

在跨端开发中，离不开一些吸顶的交互场景，可以参考淘宝或是京东类电商 app 中一些 tab ，在整个容器滑动的过程中，吸顶效果非常的连贯和丝滑的，当然这些 tab 可能是用 native 开发的，但是跨端应用也能实现很不错的吸顶效果，那么今天我们就来研究一下跨端开发是如何实现吸顶的。

希望通过这篇文章，你将学习到：

• webview 中吸顶的实现方式。
• React Native 中吸顶方法，SectionList 是如何实现吸顶的。

创作不易，希望屏幕前的你能给笔者赏个赞，以此鼓励我继续创作前端硬文。

二、webview 吸顶实现方式

在移动端开发中，webview 已经成为很重要的一部分，比如 app 中内嵌的 web 页面，或者小程序的视图载体，本质上都是 webview。

基于 webview 的混合开发模式非常受到欢迎，回到今天的主题上来，在 webview 中如何实现吸顶效果呢？

2.1 position :sticky

webview 本质上就是 web 应用，所以我们可以使用 css 属性来做很多交互效果。如果说到吸顶效果，这里首先想到的就是 position:sticky 粘性属性。

position:sticky 是一个新的css3属性，它的表现类似于 position:relative 和 position:fixed 的交集。

在目标区域在屏幕中可见时，它的行为就像 position:relative;

而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。

通过上面可以得出，如果实现吸顶效果，设置一个 css 属性就能实现。

如上图所示，图中 head 部分是需要吸顶的内容，那么把 head 加上 position:sticky 就可以了。

sticky 的缺点：

当然 sticky 也有一些缺点：

sticky 属性存在兼容性。

sticky 和 ab