阅读 68

CSS实现吸顶效果

效果图如下

示例组件代码

原理

style:"position:sticky;top:0"

兼容性

拓展

1.将head/tab/list封装成slot，加入手势就可以封装成一个简易的简介说明组件了

2.position:sticky配合left/top/right/bottom可以实现表格表头的锁定等功能

文章分类
前端
文章标签
Vue.js
相关推荐
  • _Peach
    3天前
    前端
    程序员必懂小知识之组件吸顶实现
    大家好，我是_Peach，今天来聊下工作中常用的'吸顶效果'实现 什么是吸顶效果 滚动到一定的高度 会吸附到顶部不动
    • 116
    • 1
  • moreandless
    4月前
    前端
    我与滚动杠上了-吸顶篇
    滚动是页面上常见的交互行为之一，为了让一些重要的信息始终出现在界面上，不随着页面滚动而看不见。前端会在它向上滚动出屏幕前把它固定在顶部，向下滚动到该出现的位置时把它释放掉，这样的交互方式称为吸顶。
    • 309
    • 1
    我与滚动杠上了-吸顶篇
  • chokcoco
    2年前
    CSS 动效 前端
    不可思议的纯 CSS 实现鼠标跟随效果
    直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样： 通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。 当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CS…
    • 2.2w
    • 105
    不可思议的纯 CSS 实现鼠标跟随效果
  • alphardex
    1年前
    CSS
    请收下这72个炫酷的CSS技巧
    CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非…
    • 3.8w
    • 74
    请收下这72个炫酷的CSS技巧
  • 天明夜尽
    11月前
    CSS GitHub
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
    一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。 久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。 初步前端与高级前端之间，最大的差距可能就是信息差造成的。 …
    • 3.6w
    • 37
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
  • 羡鱼丶码鹿
    3年前
    CSS 前端 JavaScript
    用CSS实现Tab页切换效果
    最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。 缺点：因为锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。 经过实验发现第三种方法达到的效果最好。所以下面讲一下第三种实…
    • 9651
    • 5
  • doodlewind
    1年前
    Vue.js 面试
    他写出了 Vue，却做不对这十道 Vue 笔试题
    请原谅我起了这么个浓浓营销号味道的标题。但这可丝毫没有夸大宣传，而是前端娱乐圈今日份的瓜—— 然后他自己也做错了（其中的某两道）。 Vue Core Team 的 @胖茶 40 分，可能说明带他的 mentor 不懂 Vue？不过他第二次做就拿了 90 分……这很赘婿逆袭啊。 …
    • 5.2w
    • 208
    他写出了 Vue，却做不对这十道 Vue 笔试题
  • tiutiu
    1年前
    CSS
    明天全国哀悼日，一段css让全站变灰
    想到以往默哀日访问网站时发现整站会变成全灰，即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力，那会不会有css可以直接处理所有的元素将他们变灰，随即想到了css3的filter（滤镜），并也证实了这一想法的可行性。 我们可以联想出fixed是相对于html根容器…
    • 3.5w
    • 99
  • samul
    1年前
    交互设计
    「H5」三种滚动吸顶效果实现方案以及性能优化
    sticky被称为粘性定位元素，postion属性值为sticky的元素在目标区域内时表现的和position: relative时无异。 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。 st…
    • 2946
    • 4
  • FairyEver
    3年前
    React.js Vue.js GitHub
    可视化搭建前端工程 - 阿里飞冰了解一下
    做完了这个页面做下个，新建文件，复制代码，注册路由... "海量可复用物料，通过 GUI 工具极速构建中后台应用"。 飞冰是一套综合解决方案，用来极速构建中后台应用（其实也可以做非中后台应用）。 可以做到极速是通过『海量可复用物料』和『GUI 开发工具』实现的。 在整个流程中，…
    • 5.3w
    • 156
    可视化搭建前端工程 - 阿里飞冰了解一下
  • 快狗打车前端团队
    1年前
    Vue.js CSS
    【建议收藏】90%的前端都会踩的坑，你中了吗？
    移动开发时代，前端同学刚刚送别了让人头秃的IE浏览器，却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛，始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑，都习惯性地记录了下来。…
    • 4.7w
    • 80
    【建议收藏】90%的前端都会踩的坑，你中了吗？
  • 聆木听风
    3年前
    CSS 设计 JavaScript
    10 个独特的 CSS 背景视觉效果
    10 个独特的 CSS 背景视觉效果
    • 1.2w
    • 10
    10 个独特的 CSS 背景视觉效果
  • Jimmy
    1年前
    CSS 前端
    CSS八种让人眼前一亮的HOVER效果
    巧用伪元素:before、:after等，让你的页面按钮眼前一亮。更多内容：https://github.com/reng99/blogs
    • 3.2w
    • 90
  • chokcoco
    3年前
    CSS JavaScript 前端
    滚动视差？CSS 不在话下
    视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动…
    • 1.7w
    • 48
    滚动视差？CSS 不在话下
  • chokcoco
    9月前
    CSS 前端
    一行 CSS 代码的魅力
    首先，这让我想到了，年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是： 官方给出一张图形，在给定的 400 x 300 的画布上，能够用越短的代码实现它，分数就越高。 注意是，完全一模一样还原。 额，这样当然可以，但是看看文章的标题，一行 CSS ？这明…
    • 1.5w
    • 56
    一行 CSS 代码的魅力
  • Lgowen
    2月前
    前端
    小程序利用sticky实现滑动吸顶效果
    对自己过去半个月简单的一次小结。 本期算是对我个人入职以来完成第一个需求后小结吧！还是存在太多不懂的知识以及问题等着我去学习解决了
    • 189
    • 评论
    小程序利用sticky实现滑动吸顶效果
  • 前端进击者
    1年前
    Vue.js JavaScript
    学会使用Vue JSX，一车老干妈都是你的
    连续几篇文章，每篇都有女神，被掘友给吐槽了，今天不提了女神了，反正女神都是别人的（扎心了）。这两天小编看了腾讯与老干妈的事情，晚上馒头夹老干妈吃起来都感觉很带劲。今天这篇文章将给大家小编在项目中使用JSX的一些实战经验。其实一般情况下写Vue还是比较推荐template的写法的…
    • 4.4w
    • 140
  • Sunflower127
    3年前
    CSS 前端 flexbox
    CSS实现footer“吸底”效果
    一是无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是可滚动的。 二是当内容区的内容较少时，页脚区不是随着内容区排布，而是始终显示在屏幕的最下方；当内容区的内容较多时，页脚能随着内容区的增高而撑开，始终显示在页面的最底部。 谈到“吸底”效果的实现，大家可能较多了…
    • 2.4w
    • 35
  • 菜远远升值记
    9月前
    前端
    uni-app吸顶功能
    1.前提概要当目标元素超出基准元素时,头部元素吸顶,如图所示:其中B元素为固定在底部的元素2.思路讲解获取A元素和B元素初始离顶部的距离获取滚动的距离其中要明白的是滚动的距离就是A元素上升的距离,则当
    • 378
    • 评论
  • pekonchan
    1年前
    JavaScript
    滚动导航+吸顶合并方案（含sticky详解）
    这是一个老套的需求，jq时代就很流行的交互需求。网络上也有不少资料，我这里写这篇文章的目的更主要是针对这些资料的不足，解决一些问题： 吸顶和滚动导航的资料都是独立的，二者作为独立功能独立分析。我这里要把吸顶功能作为滚动导航的一个功能之一，作为一整套方案来分析。 吸顶和滚动导航的…
    • 8630
    • 6
    • 关于作者
    前端 @ 笑看zz装臭比
    获得点赞30
    文章被阅读3,996
    下载手机APP
    一个帮助开发者成长的社区
    相关文章
    震惊，难道只有我是这么管理api的？
    25
    19
    CoordinatorLayout实现TabLayout吸顶效果
    9
    0
    滚动导航+吸顶合并方案（含sticky详解）
    136
    6
    vue实现一个简单的吸顶、锚点和滚动高亮按钮效果
    31
    4
    H5导航栏吸顶方案原理与对比
    17
    4