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

最新推荐文章于 2025-10-21 21:02:13 发布
原创 最新推荐文章于 2025-10-21 21:02:13 发布 · 931 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #css技巧 #css吸顶

本文介绍了一个简单的CSS3技巧，使用sticky定位实现元素在滚动时的吸顶效果。通过设置position:sticky;和top:0;等属性，可以使元素在页面滚动到特定位置时固定在顶部。

css技巧

一、滚动吸顶

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

position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 99;
CSS实现滑动吸顶功能
DecadentF的博客
04-01 7466
首先先上效果图，来筛选需要学习的同伴（驱逐，大佬退散！！！） 因为这个需求是公司微信小程序里提出来的，所以我就直接使用小程序来演示了，没学过小程序的同僚不用担心，因为小程序它的语法基本上就是我们前端语法。 接下来就是我们的核心实现了： .item-id{ position: sticky; top: 0; } 没错，就是这么两行CSS代码，一行js代码都不需要，开...
css粘性定位position:sticky
浩星
08-10 2505
前言： css3中有一个很有趣的属性position:sticky，粘性属性，效果是一个吸顶效果，可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时 (比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 ***注意，这个兼容性特别不好 效果图： 基本用法： nav{ position:st...
css实现5种滚动吸顶实现方式的比较(性能升级版)
12-14
修改版预览 这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。 修改内容如下： 添加了图文说明，直观的说明 getBoundingClientRect()集合含义 频繁 reflow 风险该如何规避(优化滚动监听) 监听滚动带来的性能问题(使用 IntersectionObserver, 新方案) 修改更新的内容在第 4 点和第 5 点，如果你看过本文，可以直接看修改更新的内容。或者你可以再看一遍。 前言 我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳
速通前端 CSS：粘性定位（Sticky）实战，轻松实现吸顶效果
最新发布
udhgjvmlss的博客
10-21 315
是CSS中最被低估的属性之一，用极简代码解决了传统固定定位的布局断裂问题。下次实现吸顶效果时，不妨丢掉JavaScript，拥抱这行优雅的CSS魔法！动手练习顶部导航（滚动50px后吸顶）侧边栏（距离顶部100px粘附）页脚促销条（滚动到底部时弹出）
css3 div吸顶
xuanwuziyou的专栏
04-10 2969
position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: sticky; top: 0; z-index: 888;
css实现滚动吸顶效果
qq_41688060的博客
09-23 1262
<!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:
基于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仅...
不需要 JS！仅用 CSS 也能达到监听页面滚动的效果！
m0_73257876的博客
08-24 429
以上就是全部分享内容了，是不是又掌握一个 CSS 小技巧？固定头部的布局推荐用 sticky 实现，好处是可以保留头部占位，无需额外预留整体实现思路是CSS 障眼法和 CSS 层级，相互遮挡fixed 定位在不设置 top 或者 left 值时，仍然位于原先位置，但是会在这个位置固定下来absolute定位在不设置 top 或者 left 值时，仍然位于原先位置，也会跟随内容滚动纯色遮挡在滚动时有些生硬，半透明渐变遮挡在滚动时会更加柔和。
2022web前端全栈完整整理——（二）css/css3篇
斗师——Ace
05-06 772
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'>文本颜色<
css吸顶：标题在滚动时会一直贴着最顶上
qq_35353972的博客
12-27 2286
css吸顶
css实现元素吸顶效果
qq_34528147的博客
11-01 1449
今天有个要做吸顶效果的需求，由于页面比较复杂，我在那猛写各种监听，准备用fixed实现，突然搜到了，非常好用，记录一下。 是 CSS 中的一种定位属性，它使元素在页面滚动时可以相对于视口或某个父元素保持固定位置。这意味着元素会在页面滚动到特定位置时停止滚动，并保持在那个位置，直到页面继续滚动到它的上下文范围之外。要使用 ，需要定义以下三个属性：以下是一个基本的示例： 注意事项 设置了position:sticky的元素的效果完全受制于父级元素，因为他不会脱离文档流。https://blog.csdn.ne
[css] 小案例---滚动吸顶
qq_14993591的博客
08-05 531
position:sticky;是粘性定位，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)，之后为固定定位(fixed) #box { position: sticky; top: 10px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt
css实现吸顶
m0_63873004的博客
01-23 549
<div class="topbox"> 需要吸顶的部分 </div> //下面样式 .topbox { position: sticky; top:0; z-index:999; height: 30px; width: 100%; text-align: center; background:green; }
css实现吸顶效果
weixin_46381442的博客
12-06 1319
css实现吸顶效果 直接给需要吸顶的class添加一下css代码就OK了，超级简单 position: -webkit-sticky; position: sticky; top: var(--window-top); z-index: 99;
滚动页面，实现导航栏固定在顶部（吸顶效果）
热门推荐
Kris的博客
01-02 4万+
首先最简单的，是利用position的sticky属性 说明 sticky 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。 它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：0)；position:sticky这时的效果相当于fixed定位，固定在(top: 0...
CSS 实现滚动吸附效果
qq_48763502的博客
06-22 1128
滚动吸附（Scroll Snap）是一种 CSS 功能，可以让滚动操作结束时自动吸附到特定位置，非常适合创建分页滚动、轮播图或图片画廊等效果。
滚动吸顶效果--四种方式实现
weixin_34246551的博客
06-18 4347
滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。offsetTop用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。定位父级 offsetParent 的定义是：与当前元素最近的 position != static 的父级元素。或许写这个代码的人没有注意到“...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值