position:sticky 实现 按钮固定到页面顶部——基础积累

之前写过一篇博文：关于 antd+vue——实现按钮始终固定在顶部，且根据权限的不同控制按钮组件的显示与隐藏——技能提升:http://t.csdn.cn/aiQ8g

实现原理就是：监听页面的滚动事件，改变按钮组件的position由absolute改为fixed，从而实现固定定位的效果。

上面的效果其实是有问题的。会出现按钮组件频繁闪动的问题。

下面介绍一种非常简单的方法，就是通过position:sticky实现元素的粘连到顶部。

1.使用position:sticky的条件

1.1 粘连元素的最近的父级需要高度固定

包裹的父容器高度必须小于sticky元素的高度

1.2 粘连元素的任一父级需要出现滚动条

粘连元素的任一父级必须出现滚动条，也就是需要设置`overflow:auto`,如果设置了`overflow:hidden`，则无法实现粘连功能

1.3 粘连元素需要指定top right left bottom参数之一

粘连元素须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同

1.4 为了保证粘连元素在页面顶部，需要设置z-index参数

2.实际代码

2.1 html代码

<a-spin class="wrapConCls">
	<div class="buttonCls"></div>
	....
</a-spin>

2.2 css代码

//父级元素的css样式
.wrapConCls {
    
    
  max-height: calc(100vh - 200px);
  overflow: auto;
  position: relative;
  &::-webkit-scrollbar {
    
    //这种less的样式是为了隐藏滚动条，为了美观，但是滚动效果还是要有的
    display: none;
  }
}
//粘连元素的css样式
.buttonCls{
    
    
	position: sticky; 
	top: 0; 
	z-index: 2
}

最终效果图如下：


多多积累，多多收获！！！