【css3技巧(四)】滚动吸顶。

最新推荐文章于 2022-12-27 17:46:02 发布
最新推荐文章于 2022-12-27 17:46:02 发布
阅读量907 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Css/Html 文章标签： css3 css技巧 css吸顶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42690547/article/details/103617864
本文介绍了一个简单的CSS3技巧，使用sticky定位实现元素在滚动时的吸顶效果。通过设置position:sticky;和top:0;等属性，可以使元素在页面滚动到特定位置时固定在顶部。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css技巧

一、滚动吸顶

非常简单的一个css3属性，注意兼容性:positon:sticky.

position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 99;
写一个滚动吸顶的布局
王铁柱666的博客
04-19 279
滚动吸顶布局通常用于网页设计，其中某个元素（例如导航栏或标题）在滚动页面时保持固定在视口的顶部，直到被另一个具有相同行为的元素推下去。以下是一个简单的示例，说明如何使用HTML、CSS和JavaScript来实现这种布局。
不需要 JS！仅用 CSS 也能达到监听页面滚动的效果！
m0_73257876的博客
08-24 412
以上就是全部分享内容了，是不是又掌握一个 CSS 小技巧？固定头部的布局推荐用 sticky 实现，好处是可以保留头部占位，无需额外预留整体实现思路是CSS 障眼法和 CSS 层级，相互遮挡fixed 定位在不设置 top 或者 left 值时，仍然位于原先位置，但是会在这个位置固定下来absolute定位在不设置 top 或者 left 值时，仍然位于原先位置，也会跟随内容滚动纯色遮挡在滚动时有些生硬，半透明渐变遮挡在滚动时会更加柔和。
css实现5种滚动吸顶实现方式的比较(性能升级版)
12-14
修改版预览 这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。 修改内容如下： 添加了图文说明，直观的说明 getBoundingClientRect()集合含义 频繁 reflow 风险该如何规避(优化滚动监听) 监听滚动带来的性能问题(使用 IntersectionObserver, 新方案) 修改更新的内容在第 4 点和第 5 点，如果你看过本文，可以直接看修改更新的内容。或者你可以再看一遍。 前言 我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳
css实现滚动吸顶效果
qq_41688060的博客
09-23 1238
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css实现吸顶效果-jq22.com</title> <style> .header { width:100%; height:160px; background:#87CEEB; } nav { width:100%; height:100px; position:sticky; top:
css3 div吸顶
xuanwuziyou的专栏
04-10 2954
position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: sticky; top: 0; z-index: 888;
css吸顶：标题在滚动时会一直贴着最顶上
qq_35353972的博客
12-27 2182
css吸顶
[css] 小案例---滚动吸顶
qq_14993591的博客
08-05 509
position:sticky;是粘性定位，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)，之后为固定定位(fixed) #box { position: sticky; top: 10px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt
基于uniapp的多tab滚动吸顶效果
11-19
4. **滚动吸顶（Fixed Header）效果**：这是一种常见的UI设计技巧，当用户滚动页面时，特定元素（如顶部导航栏）会固定在屏幕顶部，保持可见。在uniapp中，可以通过监听滚动事件，结合CSS的`position: fixed`属性来...
CSS滚动吸顶五种方法升级分析：性能优化与IntersectionObserver应用
本文是一篇关于CSS实现滚动吸顶效果的深度分析文章，针对之前版本进行了性能升级，重点讨论了五种滚动吸顶实现方式，并针对其中两种进行了详细优化。首先，文章指出早期的滚动吸顶效果存在bug，原因在于使用了`...
react-native滑动吸顶效果的实现过程
12-10
首先，React Native（RN）的CSS样式支持有限，不包含像Web开发中的`position: fixed`属性，这使得直接实现吸顶效果变得困难。作者最初尝试监听页面滚动状态，当滚动到特定位置时，将元素设置为固定定位，但由于RN仅...
2022web前端全栈完整整理——（二）css/css3篇
斗师——Ace
05-06 650
1. css基础：https://alex-ss.blog.youkuaiyun.com/article/details/83053901 2. css3新增属性值initial：可直接取消某个元素指定的样式值使其变为默认值，如color:initial。 3. vue3中的.vue文件的style里的css可以使用js/ts中的声明变量，且支持双向响应：属性：v-bind(js/ts变量)。 <template> <div class='ace_class'>文本颜色<
滑动滚动吸顶式导航栏
10-10
随着鼠标滚动，导航栏逐渐被遮住，当继续滚动鼠标时，导航栏出现并一直吸顶。再次鼠标上划时，导航栏又恢复原样。
导航滚动一定高度吸顶，锚点定位
12-05
网络上发现的案例。觉得不错就复制下来了。以便于自己改造！
滚动页面，实现导航栏固定在顶部（吸顶效果）
热门推荐
Kris的博客
01-02 4万+
首先最简单的，是利用position的sticky属性 说明 sticky 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。 它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：0)；position:sticky这时的效果相当于fixed定位，固定在(top: 0...
滚动吸顶效果--四种方式实现
weixin_34246551的博客
06-18 4329
滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。offsetTop用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。定位父级 offsetParent 的定义是：与当前元素最近的 position != static 的父级元素。或许写这个代码的人没有注意到“...
[js] 滚动吸顶简易版
qq_14993591的博客
09-09 198
<!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"> <title>Do.
CSS3 粘性定位实现吸顶 position: sticky
司马懿的西山居
12-29 4707
粘性定位 是 相对定位（relative）和 固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。著作权归作者所有。 它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 注意：起作用的，除了 top...
CSS实现滑动吸顶功能
DecadentF的博客
04-01 7420
首先先上效果图，来筛选需要学习的同伴（驱逐，大佬退散！！！） 因为这个需求是公司微信小程序里提出来的，所以我就直接使用小程序来演示了，没学过小程序的同僚不用担心，因为小程序它的语法基本上就是我们前端语法。 接下来就是我们的核心实现了： .item-id{ position: sticky; top: 0; } 没错，就是这么两行CSS代码，一行js代码都不需要，开...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值