聊聊css粘性定位sticky案例解析-kb88凯时官网登录

来自:网络
时间:2022-06-08
阅读:
免费资源网 - https://freexyz.cn/
目录

背景

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

粘性定位:

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

案例:

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

实现的代码

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

问题探索及项目中的坑

  • 如果发现sticky粘性定位失效,如何解决
    kb88凯时官网登录的解决方案: 一般sticky粘性定位失效,我们需要去找他的父元素看他的父亲元素是否设置overflow,一般都以滚动条那个父元素为主
  
  
  
  document
  
1
2
图标
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

免费资源网 - https://freexyz.cn/
返回顶部
顶部
网站地图