完美解决position:sticky不生效

以下是多数的搜索结果 但实际上在排查问题的过程中 很容易忽视细节从而导致仍然找不到问题

逐条分析：

- 必须指定top、bottom、left、right4个值之一

注意不漏写即可

- 父元素的高度不能低于sticky元素的高度

最需要注意的地方 设置sticky的元素可能未设置固定高度 因为和父元素高度相同从而导致没有滚动行为 在更上级发生滚动时这里就不会产生粘滞效果了

需要给sticky元素设置固定高度

height: 180px;

- 父元素不能overflow:hidden或者overflow:auto属性

这个比较坑 不只是父元素 而是所有的父级节点需要逐一排查

复制以下代码到浏览器 控制台会打印出设置了overflow: hidden的节点

function checkOverflowHidden(element) {  
 while (element) {  
 var computedStyle = window.getComputedStyle(element);  
 if (computedStyle.overflow === 'hidden') {
 console.log(element, '该元素设置了overflow: hidden')
 return true;
    }  
 element = element.parentNode;  
  }  
 return false;  
};

checkOverflowHidden(document.querySelector('此处是你设置了sticky的元素选择器'));

- 检查z-index

如果以上三条仍然不能解决问题 检查一下是不是图层被遮住了 如是则调整z-index