css sticky失效原因

2021-08-25

css sticky定义

position:sticky 定义元素为粘性定位元素,根据正常文档流进行定位,然后相对它的临近祖先滚动的元素,基于 top , right , bottom , left 的值进行偏移。

sticky的元素会创建以一个新的层叠上下文,如果其临近的祖先元素存在 overflow 的值是 hidden , scrollautooverlay 值,都会导致 sticky 失效

实战例子

废话不多说,上代码

html

<div class="row content">
  <div class="col-lg-9">
  </div>
  <div class="d-none d-md-none d-lg-block col-lg-3 right-column">
    <div class="sticky">
      sticky
    </div>
  </div>
</div>

css

.content {
  padding: 100px 0 500px 0;
  height: 1200px;
}

.right-column {
  background-color: #044A56;
}

.sticky {
  position: sticky;
  top: 0;
  height: 50px;
  background-color: #2C6E5A;
  color: #FFF;
}

代码很简单,这样就实现了一个右侧滚动固定的功能

See the Pen sticky固定元素 by kelen (@imkelen) on CodePen.

失效场景以及定位

1. 检测浏览器是否支持

js检测方法

if (!(CSS && CSS.supports && CSS.supports("position", "sticky"))) {
  // 不支持做兼容处理
}

css检测方法

.sticky {
  position: fixed;
  top: 0px;
}

@supports (position:sticky) { 
  .sticky {
    position: sticky;
    top: 0;
  }
}

2. 检测父元素是否设置了 overflow 不为 visible 的属性,可以通过下面代码来检测

let parent = document.querySelector('.sticky').parentElement;

while (parent) {
  const hasOverflow = getComputedStyle(parent).overflow;
  if (hasOverflow !== 'visible') {
    console.log(hasOverflow, parent);
  }
  parent = parent.parentElement;
}

3. 检测父元素的高度是否大于 sticky 元素的高度

父元素如果是设置了flex布局,如果 sticky 元素设置了 align-self: stretch 属性,只要 sticky 元素大于父元素高度,则无法滚动,可以设置为 flex-start

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: css3

评论

Loading...

最新评论

相关推荐

前端渲染优化-css资源加载
在日常网站开发中,我们会使用link来加载外部的css样式文件,然而css的加载会阻塞页面的渲染,直到资源加载完成并等待...
真机h5页面调试工具weinre
weinre是什么 weinre是网页远程审查工具,可以在pc端调试真机的浏览器页面,但是不能用来调试js wein...
css高性能动画
浏览器渲染流程 要优化动画性能,首先要了解浏览器是如何进行元素渲染的,浏览器的渲染流程有以下三步 计算元素的样式...
scroll-top-icon