聊聊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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php使用codebase生成随机数
2014/03/25 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
php中使用GD库做验证码
2016/03/31 PHP
关于php中一些字符串总结
2016/05/05 PHP
自动更新作用
2006/10/08 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
就业协议书怎么填
2014/04/11 职场文书
校园环保建议书
2014/05/14 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
五四演讲稿范文
2014/09/03 职场文书
房屋转让协议书
2014/10/18 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
会议营销主持词
2015/07/03 职场文书
建房合同协议书
2016/03/21 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android