前端实现吸顶的三种方式

何为吸顶？吸顶就是随着页面滚动，某个元素在移动到顶部后便会固定下来，并且不会再因为页面继续滚动而消失。

常见应用于页面的Tab栏。以下是自己在学习过程中简单整理的三种吸顶方式（仅描述思路）。

一、position: sticky

设置粘性定位并且添加某个方位才可生效，但是兼容性较差。

二、动态修改元素的position

监听页面的滚动，比较元素初始状态距离顶部的高度offsetTop 与页面此时的滚动高度。当后者大于前者时，修改元素的position方式为fixed。

三、障眼法

跟第二种方法有相似的地方，而第二种方式更为常用与简便。

当第二种方法不起作用的时候可以选择第三种方法，比如在 better-scroll 框架内实现吸顶效果，固定定位会出现定位不准确的问题。

具体操作：

复制一个相同的元素，将其固定于顶部并让其先隐藏。
监听页面的滚动，比较元素初始状态距离顶部的高度offsetTop 与页面此时的滚动高度，当后者数值大于前者数值时，原来的元素刚刚好触顶，且正与新元素的位置重合。
此时我们在监听方法中，让这个新元素显示。
当页面继续滚动的时候，原来的元素已经被滚上去了，而新的元素一直被固定在顶部并且此时已经显示出来，所以这个过程发生的时候，会让人有一种元素改变了定位方式的错觉。

前端实现吸顶的三种方式相关推荐

前端实现跨域的三种方式
前端解决跨域的三种方式: 1.cors跨域(只需要后端配置) header("Access-Control-Allow-Origin:*"); // 允许任何来源 header(& ...
前端实现文件下载功能的三种方式
一些管理系统常常会有导出文件的功能,这里介绍三种文件下载的尝试 1. 通过文件地址下载文件此方式最为简易,只需要知道文件在服务器上的地址,就可以通过a标签实现下载 <a href=" ...
前端请求后端数据的三种方式！
在前后端分离的开发项目中,前后端联调的时候会出现这样那样的问题,尤其是在调取数据的程序上面,有时候前端给的前端给到后端的明明是正确的但就是无法拿到正确的数据,下面小千就来给大家详解一下常见的三种数据传 ...
前端请求后端数据的三种方式
在前后端分离的开发项目中,前后端联调的时候会出现这样那样的问题,尤其是在调取数据的程序上面,有时候前端给的前端给到后端的明明是正确的但就是无法拿到正确的数据,下面小千就来给大家详解一下常见的三种数据传 ...
前端发送同步请求的三种方式
先发张图,后续记录
前端特殊符号展示的三种方式
一.效果图: 二.代码块: <!DOCTYPE html><html><head><meta charset="utf-8">< ...
vue前端常用的三种方式模拟获取数据
前端的三种方式模拟获取数据 1⃣️.mockjs插件获取: 1.首先我们先进行安装mockjs,进入项目在终端输入:npm install mockjs --save 2.我们可以在src目录下新建m ...
java 异步事件_处理异步事件的三种方式
在网站开发中,异步事件是项目必然需要处理的一个环节,也因为前端框架的兴起,通过框架实现的 SPA 已经是快速建构网站的标配了,一部获取数据也就成了不可或缺的一环:本文来就讲一讲 JavaScript ...
web服务器与网页表单通信,前端与后端通信的几种方式
只有知道了历史,才能更好的把握现在和未来. 在项目中,通常前端开发主要完成两件事情,一是界面搭建,一是数据交互. 下面是我总结前端与后端交互的几种方式,本文只作简单介绍,不做深入了解. 一.AJAX ...

前端实现吸顶的三种方式

一、position: sticky

二、动态修改元素的position

三、障眼法

前端实现吸顶的三种方式相关推荐

最新文章

热门文章

前端 实现吸顶的三种方式

一、position: sticky

二、动态修改元素的position

三、障眼法

前端 实现吸顶的三种方式相关推荐

最新文章

热门文章

前端实现吸顶的三种方式

前端实现吸顶的三种方式相关推荐