position:sticky_position: sticky; top: 0;吸顶效果,随着滚动条的滚动会再往上滑一段距离怎么解-程序员宅基地

position属性设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点:

  • 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
  • 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。
  • 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量。

但这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式;基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari:

 

需要考虑父容器的高度情况:sticky元素在到达父容器的底部时,则不会再发生定位,如果父容器高度并没有比sticky元素高,那么sticky元素一开始就达到了底部,并不会有定位的效果。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ygh5123687/article/details/88424843

智能推荐

简单说说NVMe 2.0协议_nvme2.0-程序员宅基地

文章浏览阅读5.7k次,点赞2次,收藏21次。简单介绍一下2022年1月最新的NVMe协议_nvme2.0

微信公众号只能设置两个网页授权域名的解决方案-程序员宅基地

文章浏览阅读5.1k次,点赞2次,收藏10次。中转站index.php<?phpif(isset($_GET['param']) && !empty($_GET['param'])){ $param = urldecode($_GET['param']); if(!strpos($param, '?')){ $action = "huidiao.php?param=" .$param.'?1=1'; }else{ $action = "huidiao.php?par

完整版:献给初学者的Java学习方法-程序员宅基地

文章浏览阅读77次。2019独角兽企业重金招聘Python工程师标准>>> ..._java给初学者最好理解的讲义

L2D1 linux下deb包管理及常用shell命令_在debin包rules中嵌入shell命令-程序员宅基地

文章浏览阅读661次。主要是学习了linux下软件包的离线安装和在线安装方法,以及依赖修复和软件在线更新,还讲了linux基本命令和特殊命令,特殊命令主要是管道和命令置换。_在debin包rules中嵌入shell命令

魔方机器人01 kociemba安装和使用-程序员宅基地

文章浏览阅读6.3k次,点赞11次,收藏57次。等不了开学了,今天耐不住性子开始用现有资源把魔方机器人前期准备起来。本方案使用编程语言为python3.整体方案OpenCV完成图像识别并输出魔方状态字符串使用现有的kociemba包解算理论步骤将理论步骤转换为机械执行的步骤步进电机执行机械步骤大概就是这样,摸着石头过河kociemba包的使用先用anaconda搭建一下环境,安装好kociemba包。kociemba包下..._kociemba

软件项目管理 3.2.预测生存期模型_预测型生存期模型-程序员宅基地

文章浏览阅读4.4k次。软件项目管理 3.2.预测生存期模型【公众号 “项目管理研究所” 将会第一时间更新文章】 归档于软件项目管理初级学习路线第三章 生存期模型《初级学习路线合集 》前言大家好,这节我们学习预测生存期模型,预测模型是一种传统模型,项目具有高确定性和很明确的需求,项目活动通常以顺序的方式执行,没有反馈。预测型模型主要有瀑布模型和V模型。一、瀑布模型瀑布模型是最经典,最传统的模型,他严格的要求项目按照秩序来执行,单向的如同瀑布一样,只能从上往下,不能返回,编码阶段不能执行修改需求和设计。瀑布模型_预测型生存期模型

随便推点

类模板分文件编写遇到的问题和解决方法_类模板函数分文件时为什么调用不到-程序员宅基地

文章浏览阅读425次。1.问题引入: 当使用类模板的成员函数的具体实现与声明分别写在不同的文件时,出现错误,使用vs作为IDE。错误代码:main.cpp#include"person.h"void test01() { Person<string, int> p("赵云", 38); p.showPerson();}int main() { test01(); return 0;..._类模板函数分文件时为什么调用不到

豆沙绿色值---全_豆沙绿参数-程序员宅基地

文章浏览阅读6.9k次。豆沙绿的参数为:a. RGB颜色:(199,237,204)b. 十六位颜色代码:C7EDCCc. 色调(Hue)85、饱和度(Sat)123、亮度(Lum)205------------- The End -------------许可协议: 转载请保留原文链接及作者。..._豆沙绿参数

HBase在微博搜索业务中的应用-程序员宅基地

文章浏览阅读1k次。在社交媒体平台的发展过程中,越来越多的人依赖于微博进行信息的传播、分享。不仅如此,微博作为新浪等知名门户网站的基础服务,有着独特的特性。比如,它是一个高度互联网化的信息流通工具,用户可以自由的发布或转发微博内容,并且具有大量的搜索功能。因此,为微博搜索服务提供更加高效、精准的结果,帮助用户找到想要的内容,也成为各大互联网公司关注的一个重点方向。在微博搜索服务中,通常会采用基于搜索引擎的关键词匹配方式,通过检索用户输入的关键字,返回包含相关主题信息的微博条目。

centos6安装并配置zabbix3.2_centos6配置zabbix-程序员宅基地

文章浏览阅读274次。1.安装PHPZabbix 3以后对PHP的要求最低为5.4,而CentOS6默认为5.3.3,完全不满足要求,故需要利用第三方源,将PHP升级到5.4以上,注意,不支持PHP7rpm -ivh http://repo.webtatic.com/yum/el6/latest.rpmyum install -y php56w php56w-gd php56w-mysql php56w-bcma..._centos6配置zabbix

Sqoop常用命令及参数_sqoop参数-程序员宅基地

文章浏览阅读2.4k次,点赞2次,收藏16次。目录一、常用命令列举二、命令&参数详解1、公用参数:数据库连接2、公用参数:import3、公用参数:export4、公用参数:hive5、命令&参数:import6、命令&参数:export7、命令&参数:codegen8、命令&参数:create-hive-table9、命令&参数:eval10、命令&参数:import-all-tables11、命令&参数:job12、命令&_sqoop参数

IntelliJ IDEA文件变了颜色,原来是这个原因!!_idea文件名绿色怎样改回来-程序员宅基地

文章浏览阅读3w次,点赞6次,收藏30次。前天将这些文件提交到了github,今天打开,新建文件,发现文件变了颜色(不是报错!可以编译运行),原来是这个原因!解析我上网查了一下:现在记录其实,这主要和你的版本控制工具相关绿色,已经加入控制暂未提交红色,未加入版本控制蓝色,加入,已提交,有改动白色,加入,已提交,无改动灰色:版本控制已忽略文件。图片描述如何在ide修改?些文件名的颜色都是可以修改的,颜色的意义是..._idea文件名绿色怎样改回来