聊聊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 选择器 属性选择器介绍
Jan 21 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
九种原生js动画效果
2015/11/11 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
js实现简单的打印表格
2020/01/15 Javascript
python动态加载变量示例分享
2014/02/17 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python如何生成树形图案
2018/01/03 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python批量修改文件编码格式的方法
2018/05/31 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
岗位职责的构建方法
2014/02/01 职场文书
学习教师法的心得体会
2014/09/03 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
优质护理心得体会
2016/01/22 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
详解python的异常捕获
2022/03/03 Python