使用定位实现

一般我们使用position:sticky来进行实现
他相当于relative和fixed相结合
- 在页面滚动过程中，含有粘性定位的元素到父元素的距离达到一定要求的时候，他的属性就会由relative变为fixed

<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"><title>Document</title><style>#container{position: relative;width: 200px;height: 200px;border: 1px solid black;overflow: auto;}#header{height: 100px;position:sticky;top: 0;background-color: red;}</style>
</head>
<body><div id="container"><div id="header">固定的头部</div><div id="inner">你好 <br>...</div></div>
</body>

请多写几行 你好 <br>然后，运行demo，我们会发现头部固定了

缺点

当前代码的兼容性不太好
不会触发BFC 点击
样式表 zindex 无效。行内 style 写有效。

获取DOM位置实现

他的核心是当达到一定的条件后，将盒子的定位属性改为fixed

条件

滚动的元素和固定的元素之间的差值为0的时候

步骤

我们可以使用offsetTop这个属性来进行获取相关的位置，他是用来获取相对于父级定位的偏移量的属性，关于offsetTop这个属性，点击
监听滚动事件，每一次滚动获取滚动条滚动的距离，关于scrollTop 点击
滚动的距离与偏移的距离作对比，如果滚动的距离大于等于偏移的距离，那么直接设置吸顶盒子的属性为fixed

代码

<head><style>*{margin: 0;padding: 0;}#container {width: 200px;height: 200px;border: 1px solid black;overflow: auto;position: relative;}#header {height: 100px;background-color: red;width: inherit;}</style>
</head><body><div id="container"><div id="header">固定的头部</div><div id="inner">你好 <br>...</div></div><script>// 选中要吸顶的盒子const headerEle = document.getElementById("header")// 获取盒子的距离const _headerTop = headerEle.offsetTopconst _container = document.getElementById("container")// 监听事件_container.onscroll = () => {const _scrollTop = _container.scrollTopconsole.log(_scrollTop, _headerTop)// 距离比较if (_scrollTop >= _headerTop) {headerEle.style.position = "fixed"headerEle.style.top = 0headerEle.style.left = 0}}</script>
</body>

css效果之吸顶效果相关推荐

原生js实现吸顶效果
什么是吸顶效果: css中固定定位(fixed)实现的效果就是吸顶效果那么如何用js去操作. 代码如下 <style>* {margin: 0px;padding: 0px;}.top ...
30秒实现Vue吸顶效果
酱酱,好久不见鸭! 前言:吸顶效果图: 1.滚动前: image.png 2.滚动中: image.png 3.滚动超过后: image.png 直观效果可参pc端微博左侧的信息栏第一步:html ...
vue音乐项目歌手页面滚动、吸顶效果
总结singer页面: 1.api中去获取 ['热',A-Z] 以及根据['热',A-Z]获取的所有歌手的数据 2.渲染数据 2.1 渲染左边字母title ['热',A-Z] + 该字母开头的歌手 ...
vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
vue3实现吸顶效果
一.HTML 用样式控制,如果isFixed 等于true,将内容固定到顶部 <div :class="isFixed ? 'is-fixed' : 'txt'" ref=& ...
滚动页面，实现导航栏固定在顶部（吸顶效果）
内容说明页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...
jquery实现导航吸顶效果
jquery实现导航吸顶效果,主要通过监听页面滚动事件和获取页面各参数实现,可参考我的博客<使用原生js获取页面信息>和jquery手册 <!DOCTYPE html> < ...
微信小程序中实现吸顶效果(流畅、不卡顿)
欢迎访问我的个人博客最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传 ...
最贴近京东首页体验的嵌套滑动吸顶效果
吸顶效果是各家 App 或多或少都会用的一个交互,这种交互也常见于 PC.H5,可以说是一种通用性很强的前端交互体验,相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个,因为在嵌套布 ...

css效果之吸顶效果

使用定位实现

缺点

获取DOM位置实现

条件

步骤

代码

css效果之吸顶效果相关推荐

最新文章

热门文章