使用css如何实现吸顶

最新推荐文章于 2024-04-24 11:42:12 发布
最新推荐文章于 2024-04-24 11:42:12 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 笔记 文章标签： css 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48409307/article/details/120670169
版权

我们在写一些页面需要固定到顶部的效果，滚动到这个标题的位置后，就固定在顶部，当滚动条向上，滚动到页面顶部，导航栏回到原位。那么一般叫粘性布局。有赞vant，有这个组件。微信小程序也有一个mp-sticky的扩展组件！

发现很简单，用css就可以自己实现。只需要这三个样式。

position: sticky;
top:0;
z-index: 99;//权重自己设置哦！
王浩雨.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现吸顶导航效果
11-29
本文实例为大家分享了jquery实现吸顶导航效果的具体代码，供大家参考，具体内容如下 css: *{margin:0;padding:0;} body{ margin:0 auto; max-width:10rem; } header{ width:10rem; height:1rem; ...
js实现导航吸顶效果
11-30
话不多说，请看代码： <!...<... <head>...meta charset="utf-8" />...meta name="viewport" content="width=device-width,initial...link rel="stylesheet" href="img/mobile-reset.css" rel="external nofollow
css吸顶(position: sticky；)
空&白的博客
12-27 990
解释下上面的效果：当元素tabs-s滑动到距离顶部60rpx的时候，会“固定”在那个地方，不会随着页面的向上滑动而滑动；但是向下滑动距离顶部小于60rpx的话，那元素tabs-s也会跟着向下滑动。用样式position: sticky;来做吸顶其实很简单，只要在设置一个top属性即可。
吸顶效果的两种实现方式
qq_49698477的博客
12-04 353
第二种：使用sticky定位。第一种：使用fixed定位。
前端-移动端基于vant4开发
最新发布
qq_42371932的博客
04-24 696
头部的吸顶效果，可以使用vant4的粘性布局。
css实现吸顶效果 - position：sticky
一块小砖头的博客
09-15 4826
css粘性定位position：sticky position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 #stickyBox{ position: -webkit-sticky; position: sticky;
纯css的吸顶效果实现——使用“position:sticky”
SCUhzs
07-30 7162
文章目录一.sticky用法1.1 示例11.2 示例2二.sticky使用过程中的坑2.1 只在 Containing Block 内有效2.2 Overflow对Sticky的影响2.3.兼容问题三.应用场景3.1 表格的查看3.2 导航栏、栏目条等吸顶效果四、参考资料 一.sticky用法 使用 CSS Sticky 需要两个条件。 position: sticky; top: 0; /*top/right/bottom/left 任一有效值*/ top：0 意思是当元素滑动到距离视口 0
css吸顶特效（elementui vue3官网）
lllsj的博客
10-09 1119
效果如图：当浏览器滚轮在最上面的时候 没什么区别。当鼠标滚轮超出最上面高度时会有这种粒子感。首先要 明确 css 基础属性 position: sticky;
css实现5种滚动吸顶实现方式的比较(性能升级版)
12-14
监听滚动带来的性能问题(使用 IntersectionObserver, 新方案) 修改更新的内容在第 4 点和第 5 点，如果你看过本文，可以直接看修改更新的内容。或者你可以再看一遍。 前言 我入职第二家公司接到的第一个需求就是...
Vue开发实现吸顶效果的示例代码
01-19
因为项目需求，最近开始转到微信公众号开发，接触到了Vue框架，这个效果的实现虽说是基于Vue框架下实现的，但是同样也可以借鉴到其他地方，原理都是一样的。 进入正题，先看下效果图：   其实js做这个效果还是挺...
用position: sticky实现顶部悬停，吸顶效果展示视频
07-07
用position: sticky实现顶部悬停，吸顶效果展示视频
纯css实现吸顶效果
WGS.
01-12 946
<div class="header"> </div> <nav> 用于显示粘性定位的头 </nav> <div class="content"> </div> <footer> 底部 </footer> .header { width:100%; height:160px;...
css实现吸顶效果
Yugoup的博客
09-26 2136
position有一个还在实验的属性值sticky，可以很简单的实现吸顶的效果 <div class="box box1">box1</div> <div class="box box2">box2</div> <div class="box box3">box3</div> .box { position: stick...
伪元素法简易遮罩层
weixin_55559151的博客
02-13 566
<!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" /> <titl
CSS 吸顶效果 滚动头部固定，小技巧
宁夏前端工程师，马卫斌，wx：1457508895
06-30 5726
在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。只有滚动以后才出现阴影。一般情况下，使用 JS 监听滚动事件动态添加类名就可以实现，不过经过我的一番尝试，发现这种效果仅仅使用 CSS 也能轻易实现。 css 实现原理 实现这个效果，需要一点点“CSS 障眼法”。假设有一层阴影，在默认情况下用一个元素遮挡起来，以下都称之为“遮挡物”。 根据以上原理，这里需要添加一个元素，阴影和遮挡物都可以用伪元素生成css 代码 以上......
vue.js里实现吸顶效果
qq_43579525的博客
05-23 1288
html 元素： <div class='container' ref='topTab'> <div class="absolute" :class='{fixed:isFixed}'> <!-- tab--> </div> <div> <!-- content -->...
实现吸顶效果组件
miaomiao博客
04-01 655
import React, { Component } from 'react'; //引入由styled-components创建的样式组件 import {ScrollToTopWrapper} from './ScrollToTopStyleComponents' class ScrollToTop extends Component { constructor(p...
滚动页面，实现导航栏固定在顶部（吸顶效果）
热门推荐
Kris的博客
01-02 4万+
首先最简单的，是利用position的sticky属性 说明 sticky 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。 它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：0)；position:sticky这时的效果相当于fixed定位，固定在(top: 0...
css怎么实现吸顶加阴影
05-27
要实现吸顶加阴影效果，可以使用CSS的position属性和box-shadow属性。 首先，设置元素的position属性为fixed，使其固定在页面上方。然后，可以为元素添加box-shadow属性，设置阴影的颜色、模糊度、大小等等。 下面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值