聊聊CSS粘性定位sticky案例解析


Posted in HTML / CSS onJune 01, 2022

背景

最近在做项目迁移,因为技术不同,导致某些功能的问题需要手动解决;如何在居位在主体区域底部不随内容而滚动;
OK进入正体这期分享的是CSS粘性定位属性sticky来解决上面的问题

粘性定位:

粘性定位可以被认为是相对定位和固定定位的混合。是 position:sticky是css定位新增属性;它主要用在对 scroll 事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到 sticky粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置

案例:

我们先来看个案例及最终的效果

聊聊CSS粘性定位sticky案例解析

实现的代码

通过一个简单案例去带大家粗略了解粘性布局更容易更好理解,东西本身不负载但存在一些问题需要去进一步了解

问题探索及项目中的坑

  • 如果发现sticky粘性定位失效,如何解决
    解决方案: 一般sticky粘性定位失效,我们需要去找他的父元素看他的父亲元素是否设置overflow,一般都以滚动条那个父元素为主
<!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">
  <title>Document</title>
</head>
<body>
  <div class="aside-warp">
    <div>1</div>
    <div>2</div>
    <div class="icon">图标</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
  </div>
</body>
</html>
<style>
  body {
    height: 2000px;
    overflow: auto;
  }
  .aside-warp {
    margin-top: 50px;
    height: 700px;
    width: 500px;
    background-color: aliceblue;
    overflow: hidden; //这里是模仿没有滚动条的效果
  }
  .aside-warp div {
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid red;
  }
  .icon {
    position: sticky;
    top: 0px;
    background-color: aquamarine;
  }
</style>

如果能解决上面的案例说明对粘性布局了解;

来说明下上面的案例的问题:为什么此时图标就无法粘性定位了,主要是因为它(子元素)不知道以那个父元素的滚动为准(现在有两个父级元素都产生了滚动),所以我们要对一层层祖级元素检查看是否有overflow属性如果有将元素设置 overflow: visible; body {overflow: visible; }; 简单理解:两个父级body 和div.main 如果同高度宽度的话,子元素就不知道到底以父元素为主,就会出现无法粘性定位的问题,所以避免这个问题我们要将其中不要定位的父元素设置{overflow: visible; }; PS:像这种案例非常常见我只是随机例举,比如像吸顶啊等等都是可以用粘性定位实现的

到此这篇关于关于CSS粘性定位sticky的文章就介绍到这了,更多相关CSS粘性定位sticky内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 3D制作实战案例分析
Sep 18 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 #HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 #HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 #HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 #HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 #HTML / CSS
html中相对位置与绝对位置的具体使用
CSS 左边固定宽右边自适应的6种方法
May 15 #HTML / CSS
You might like
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
javascript history对象详解
2017/02/09 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python 对象中的数据类型
2017/05/13 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
请说出以下代码输出什么
2013/08/30 面试题
小学语文课后反思精选
2014/04/25 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python