CSS position属性sticky

在开发时,经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候,让一部分内容作为navbar,也就是置顶显示,我们一般会使用js监听scroll事件来实现,但是新增的css3属性position:sticky可以简单实现,省去了繁琐的计算
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性

position:sticky用法

position:sticky 被称为粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素。
简单的理解就是:在目标区域以内,它的行为就像 position:relative;在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置。
可以说是相对定位relative和固定定位fixed的结合
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量。
position:sticky 使用条件

1、必须指定top、bottom、left、right 4个值之一,否则只会处于相对定位
2、sticky元素仅在其父元素内生效

示例:
在这里插入图片描述
我设置当左侧滚动一个格子后,2定位在上方,右侧自然滚动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body,html,.box {width: 100%;height: 100%;}.box {font-size: 20px;overflow: auto;display: flex;}.left {width: 200px;position: sticky;top: -320px;}.left-box {width: 200px;height: 300px;background-color: #ccc;margin-bottom: 20px;}.right {margin-left: 20px;flex: 1;}.right-box {width: 100%;height: 300px;margin-bottom: 20px;background-color: forestgreen;}</style>
</head>
<body>
<div class="box"><div class="left"><div class="left-box">1</div><div class="left-box">2</div><div class="left-box">3</div><div class="left-box">4</div></div><div class="right"><div class="right-box">1</div><div class="right-box">2</div><div class="right-box">3</div><div class="right-box">4</div><div class="right-box">5</div><div class="right-box">6</div><div class="right-box">7</div><div class="right-box">8</div><div class="right-box">9</div><div class="right-box">10</div><div class="right-box">11</div><div class="right-box">12</div></div>
</div>
</body>
</html>

在web开发中注意兼容性:

sticky目前仍是一个试验性的属性,并不是W3C推荐的标准。它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图,基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/260592.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu屏幕小的解决办法

1. 安装vmware tools , 再点自适应客户机 执行里面的vmware-install.pl这个文件 &#xff1a;sudo ./vmware-install.pl 执行不了可以放到家目录&#xff0c;我放在了/home/book 里面 最后点这个自适应客户机 然后我这里点不了是因为我点了控制台视图和拉伸客户机&#xff0c…

四旋翼无人机控制-零散笔记整理

四旋翼无人机控制-零散笔记整理 说明仿真框架 说明 这是低创文章&#xff0c;本意是整理本科留下来的一堆零碎的纸质笔记&#xff0c;整理完就把纸质的扔了。所以前后不连贯&#xff0c;也可能有错误&#xff0c;图片都是直接拍的笔记照片&#xff0c;很丑。如果想系统学习的可…

unplugin-vue-components解决命名冲突

我们在vue项目中通常会利用unplugin-vue-components插件进行自定义组件的自动引入 注&#xff1a;如果不知道怎么配置unplugin-vue-components插件&#xff0c;欢迎看我整理的这篇&#xff1a; vue3项目配置按需自动引入自定义组件unplugin-vue-components 当出现同名文件时&a…

Unity3D Shader 素描风格渲染管线实现详解

前言 在游戏开发中&#xff0c;渲染效果是非常重要的一部分&#xff0c;它可以直接影响游戏的视觉效果和玩家的体验。而素描风格的渲染效果是一种非常独特和有趣的风格&#xff0c;可以为游戏增添一种艺术氛围。在Unity3D中&#xff0c;可以通过编写Shader来实现素描风格的渲染…

ChatGPT-01 用ChatGPT指令,自学任何领域的系统知识

1. 指令位置 Github仓库&#xff1a;Mr Ranedeer AI Tutor 但是需要开通chatgtp plus版本&#xff0c;并且打开代码解释器 2 使用 学习内容 开始学习 GPT甚至可以给你思考题&#xff0c;给出的答案还能进行评价 配置 通过配置表修改 深度 学习风格 沟通风格 语气风格 …

从零到三维GIS高级工程师,2024年最新GIS开发系统学习路线图~必看

当前&#xff0c;三维GIS技术在建筑、城市规划、交通、电信、水利、国土资源等领域具有广泛的应用前景。随着城市化进程的加速和城市规划的复杂化&#xff0c;三维GIS技术有着广阔的市场需求。 三维GIS在二维GIS的基础上&#xff0c;增加了对地球表面的第三维度&#xff0c;即高…

计算机设计大赛 深度学习人脸表情识别算法 - opencv python 机器视觉

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习人脸表情识别系…

信奥一本通:1081:分苹果

看这个实例&#xff0c;他说给每个人分苹果都不一样&#xff0c;那么这苹果至少要多少个&#xff0c;意思就是每个人手上苹果都不一样&#xff0c;那么要达到这种效果&#xff0c;至少要多少个&#xff0c;其实这个题有技巧&#xff0c;假如我给8个人分&#xff0c;那么分法就是…

.target勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言&#xff1a; 网络安全威胁如勒索病毒已经成为企业和个人数据安全的重大挑战之一。.target勒索病毒作为其中的一种&#xff0c;以其高度复杂的加密算法和迅速变化的攻击手法备受关注。本文将深入介绍.target勒索病毒的特点&#xff0c;探讨如何有效地恢复被加密的数据文件…

“挖矿”系列:细说Python、conda 和 pip 之间的关系

继续挖矿&#xff0c;挖“金矿”&#xff01; 1. Python、conda 和 pip&#xff08;挖“金矿”工具&#xff09; Python、conda 和 pip 是在现代数据科学和软件开发中常用的工具&#xff0c;它们各自有不同的作用&#xff0c;但相互之间存在密切的关系&#xff1a; Python&…

GC调优学习

一.常见工具P62P63 1.jstat 2.visualvm插件 3.Prometheus Grafana 4.GC日志 5.GC Viewer 6.GCeasy&#xff08;强推&#xff09; 二.常见的GC模式P64 三.GC调优 1.优化基础JVM参数P65 2.减少对象产生 看以前视频&#xff0c;内存泄露相关 3.垃圾回收器的选择P66 4.优化垃圾回…

Security6.2 中的SpEL 表达式应用(权限注解使用)

最近学习若依框架&#xff0c;里面的权限注解涉及到了SpEL表达式 PreAuthorize("ss.hasPermi(system:user:list)")&#xff0c;若依项目中用的是自己写的方法进行权限处理&#xff0c; 也可以只用security 来实现权限逻辑代码&#xff0c;下面写如何用security 实现。…

Java-贪吃蛇游戏

视频效果: 贪吃蛇视频效果,简单的小项目,Java项目-贪吃蛇 注意images的图片是在proxiangmu下的,不可放在模块!!不然图片加载不出来 1.准备工作 JDK版本:JDK8.0 开发工具:IDEA 2.设计游戏图纸 实现700*900 宽度值为700像素,每个格子为25像素,共计有28个格子 宽…

22-k8s中pod的调度-亲和性affinity

一、概述 在k8s当中&#xff0c;“亲和性”分为三种&#xff0c;节点亲和性、pod亲和性、pod反亲和性&#xff1b; 亲和性分类名称解释说明nodeAffinity节点亲和性通过【节点】标签匹配&#xff0c;用于控制pod调度到哪些node节点上&#xff0c;以及不能调度到哪些node节点上&…

Leo赠书活动-16期 名校毕业生教材

Leo赠书活动-16期 名校毕业生教材 ✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 赠…

Jetpack 之Glance+Compose实现一个小组件

Glance&#xff0c;官方对其解释是使用 Jetpack Compose 样式的 API 构建远程 Surface 的布局&#xff0c;通俗的讲就是使用Compose风格的API来搭建小插件布局&#xff0c;其最新版本是2022年2月23日更新的1.0.0-alpha03。众所周知&#xff0c;Compose样式的API与原生差别不小&…

【无标题】力扣报错:member access within null pointer of type ‘struct ListNode‘

项目场景&#xff1a; 做单链表反转题目&#xff0c;报错&#xff1a;member access within null pointer of type ‘struct ListNode’ 题目链接:LINK 问题描述 我明明在初始化指针时候&#xff0c;已经处理了n2->next情况却依然报错 这个报错提示含义是&#xff1a;大概就…

牛客——火柴排队(树状数组与归并排、逆序对)

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 涵涵有两盒火柴&#xff0c;每盒装有 n 根火柴&#xff0c;每根火柴都有一个高度。 现在将每盒中的火柴各自排成一列&#xff0c; 同一列火柴的高度互不相同&#xff0c; 两列火柴之…

力扣55. 跳跃游戏(动态规划)

Problem: 55. 跳跃游戏 文章目录 题目描述思路复杂度Code 题目描述 思路 我们将问题稍做转换每次求取当前位置可以走到的最远位置&#xff0c;在此基础上我们将最终判断是否能走出整个nums&#xff1b;同时我们要判断中途会不会遇到某个位置是0使得不能继续走下去 复杂度 时间…

企业资产|企业资产管理系统|基于springboot企业资产管理系统设计与实现(源码+数据库+文档)

企业资产管理系统目录 目录 基于springboot企业资产管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、用户审核管理 3、资产分类管理 4、资产信息管理 5、资产信息添加 6、资产借出统计 7、资产归还审核 8、资产维修管理 9、资产维修…