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.mzph.cn/news/692658.shtml

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

相关文章

【动态规划专栏】专题二:路径问题--------6.地下城游戏

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…

C# 二分查找

二分查找&#xff08;Binary Search&#xff09;是一种在有序数组或列表中查找特定元素的搜索算法。该算法比较要搜索的值和数组的中间元素。如果要搜索的值小于中间元素&#xff0c;则在数组的左半部分继续搜索&#xff1b;如果要搜索的值大于中间元素&#xff0c;则在数组的右…

Vue | (三)使用Vue脚手架(中)| 尚硅谷Vue2.0+Vue3.0全套教程

文章目录 &#x1f4da;Todo-list 案例&#x1f407;组件化编码流程&#xff08;通用&#xff09;&#x1f407;实现静态组件&#x1f407;展示动态数据&#x1f407;交互⭐️添加一个todo⭐️todo勾选实现⭐️删除功能实现⭐️底部统计功能实现⭐️底部全选功能实现⭐️底部一…

每日一练:前端js实现算法之两数之和

方法一&#xff1a;暴力法 function twoSum(nums, target) {for (let i 0; i < nums.length; i) {for (let j i 1; j < nums.length; j) {if (nums[i] nums[j] target) {return [i, j];}}}return null; }方法二&#xff1a;哈希表 function twoSum(nums, target) …

函数——递归4(c++)

正整数N转换成一个二进制数 题目描述 输入一个不大于 32767 的整数 n &#xff0c;将它转换成一个二进制数。 输入 输入只有一行&#xff0c;包括一个整数 n (0≤ n ≤32767)。 输出 输出只有一行。 样例 输入复制 100 输出复制 1100100 输入复制 0 输出复制…

前端算法题——给定一个整数数组,判断是否存在重复元素。

前言 题目可以理解为如果存在一值在数组中出现至少两次&#xff0c;函数返回 true 。如果数组中每个元素都不相同&#xff0c;则返回 false。 示例 1:输入: [1,2,3,1] 输出: true示例 2:输入: [1,2,3,4] 输出: false这题一看就是 计数问题&#xff0c;题目中“如果存在一值在…

Docker从入门到上天系列第二篇:Docker与传统虚拟机对比

&#x1f609;&#x1f609; 欢迎加入我们的学习交流群呀&#xff01; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring、Security、Docker、Grpc、消息中间件、Rpc、SpringCloud等等很多应用和源码级…

代码随想录算法训练营day17||二叉树part04、110.平衡二叉树 、257. 二叉树的所有路径 、404.左叶子之和

注意&#xff1a;迭代法&#xff0c;可以先过&#xff0c;二刷有精力的时候 再去掌握迭代法。 110.平衡二叉树 &#xff08;优先掌握递归&#xff09; 再一次涉及到&#xff0c;什么是高度&#xff0c;什么是深度&#xff0c;可以巩固一下。 题目&#xff1a;给定一个二叉树&am…

为什么从没有负值的数据中绘制的小提琴图(Violin Plot)会出现负值部分?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 小提琴图&#xff08;Violin Plot&#xff09; 是一种用于展示和比较数据分布的可视化工具。它结合了箱形图&#xff08;Box Plot&#xff09;和密度图&#xff08;Kernel Density Plot&#xff09;的特…

电商数据API接口

1、将数据采集的整体成本降低55%。在电商API接口负责了整个数据采集流程后&#xff0c;这家电商公司成功节约了维护和开发上的成本。 2、电商爬虫API可以从极复杂的来源中采集数据&#xff0c;确保完整交付。在电商爬虫API的帮助下&#xff0c;该公司现在可以获取完成业务目标…

Java实现自动化pdf打水印小项目 使用技术pdfbox、Documents4j

文章目录 前言源码获取一、需求说明二、 调研pdf处理工具word处理工具 三、技术栈选择四、功能实现实现效果详细功能介绍详细代码实现项目目录WordUtilsMain类实现部分&#xff1a;第一部分Main类实现部分&#xff1a;第二部分Main类实现部分&#xff1a;第三部分 资料获取 前言…

Java-长字符串加密

引言&#xff1a; 在数据安全领域&#xff0c;加密技术是保护信息不被未授权访问的重要手段。特别是在处理长字符串时&#xff0c;如何保证加密后的数据既安全又高效&#xff0c;是一个值得探讨的话题。本文将介绍几种常见的加密算法&#xff0c;并展示如何在Java中实现这些算法…

@ 代码随想录算法训练营第8周(C语言)|Day53(动态规划)

代码随想录算法训练营第8周&#xff08;C语言&#xff09;|Day53&#xff08;动态规划&#xff09; Day50、动态规划&#xff08;包含题目 ● 123.买卖股票的最佳时机III ● 188.买卖股票的最佳时机IV &#xff09; 123.买卖股票的最佳时机III 题目描述 给定一个数组 price…

数字化转型导师坚鹏:政府数据治理方法及成功案例

课程背景&#xff1a; 很多政府存在以下问题&#xff1a; 不知道如何理解数据治理标准化建设模式&#xff1f; 不清楚如何有效掌握政府数据治理落地技术&#xff1f; 不清楚如何有效学习标杆政府数据治理案例&#xff1f; 学员收获: 深入理解数据治理标准化建设模式。…

Python学习-环境搭建

一、序章 1、Python的后台是PyPI。 2、PyPI是一个拥有成千上万第三方模块的地方。 二、环境搭建 1、Python官网地址 https://www.python.org&#xff0c;在download中下载对应系统最新版本即可。 2、安装安装包 勾选“Add Python 3.10 to PATH”&#xff0c;然后点击“I…

05 扩展组件:自定义CheckBox组件

系列文章目录 01 Qt自定义风格控件的基本原则-CSDN博客 02 从QLabel聊起&#xff1a;自定义控件扩展-图片控件-CSDN博客 03 从QLabel聊起&#xff1a;自定义控件扩展-文本控件-CSDN博客 04 自定义Button组件&#xff1a;令人抓狂的QToolButton文本图标居中问题-CSDN博客 目…

离线升级esp32开发板升级包esp32-2.0.14(最新版已经3.0alpha了)

1.Arduino IDE 2.3.2最新 2024.2.20升级安装:https://www.arduino.cc/en/software 2.开发板地址 地址&#xff08;esp8266,esp32&#xff09; http://arduino.esp8266.com/stable/package_esp8266com_index.json,https://raw.githubusercontent.com/espressif/arduino-esp32…

鸿蒙小案例-五子棋

鸿蒙小案例-五子棋 1.准备组件(组件布局) 2.下棋功能实现 3.机器人下棋功能实现 4.赢棋功能实现 5.附属功能实现刚开始以为挺简单的&#xff0c;越写越…emo 因为代码有点多&#xff0c;所以这里就简单讲下逻辑&#xff0c;文末贴上代码 逻辑只是我个人想的&#xff0c;不代…

线阵相机参数介绍之轴编码器控制

1.1 功能介绍 编码器是将检测对象的运动与相机拍摄取图相匹配的设备&#xff0c;也即检测对象运动一定距离&#xff0c;相机就拍摄一定行高的图像。 编码器会将检测对象的实际位移转换为固定数量电信号。例如&#xff1a;编码器的精度是2000p/r,该参数的含义是编码器每转一圈输…

IDEA插件推荐:免费好用!

IDEA是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它可以帮助开发人员更加高效地编写、调试和部署软件应用程序。我们在编写完接口代码后需要进行接口调试等操作&#xff0c;一般需要打开额外的调试工具。 今天给大家介绍一款IDEA插件&#xff1a;Api…