目录
背景
最近在做项目迁移,因为技术不同,导致某些功能的问题需要手动解决;如何在居位在主体区域底部不随内容而滚动;
ok进入正体这期分享的是css粘性定位属性sticky来解决上面的问题
粘性定位:
粘性定位可以被认为是相对定位和固定定位的混合。是 position:sticky是css定位新增属性;它主要用在对 scroll 事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到 sticky粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置
案例:
我们先来看个案例及最终的效果
实现的代码
通过一个简单案例去带大家粗略了解粘性布局更容易更好理解,东西本身不负载但存在一些问题需要去进一步了解
问题探索及项目中的坑
- 如果发现sticky粘性定位失效,如何解决
kb88凯时官网登录的解决方案: 一般sticky粘性定位失效,我们需要去找他的父元素看他的父亲元素是否设置overflow,一般都以滚动条那个父元素为主
document 12图标345678910111213141516171819
如果能解决上面的案例说明对粘性布局了解;
来说明下上面的案例的问题:为什么此时图标就无法粘性定位了,主要是因为它(子元素)不知道以那个父元素的滚动为准(现在有两个父级元素都产生了滚动),所以我们要对一层层祖级元素检查看是否有overflow属性如果有将元素设置 overflow: visible; body {overflow: visible; }; 简单理解:两个父级body 和div.main 如果同高度宽度的话,子元素就不知道到底以父元素为主,就会出现无法粘性定位的问题,所以避免这个问题我们要将其中不要定位的父元素设置{overflow: visible; }; ps:像这种案例非常常见我只是随机例举,比如像吸顶啊等等都是可以用粘性定位实现的