position:sticky-粘性吸附布局

一、描述

        就是在一个滚动的容器里,将一个子元素设置为postion:sticky  在元素显示在可视区域内,显示的效果与position:relative 一致，当元素被滑动出可视区域外是,显示效果与position:fixed一致

二、注意事项

        1、父元素需要存在滚动（overflow:auto，overflow:scroll），否则postion:sticky不生效；

        2、sticky元素必须配置top、right、bottom、left其中之一，否则postion:sticky不生效；

        3、父元素的高度不能低于sticky元素元素高度，否则postion:sticky不生效；

三、效果

1、吸顶效果

【1】code

html

    
吸顶
    

        
我是内容
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
    

   css

.parent-content {
    width: 400px;
    height: 400px;
    background-color: #bfbfbf;
    overflow: auto;
}
.sticky{
    position:sticky;
    top:0;
    width: 100%;
    height: 40px;
    background-color: lightseagreen;
 }
.content {
     width: 100%;
     height: 600px;
     background-color:thistle;
}

效果

默认效果

 

 滚动效果

 2、折叠面板

html：

创建组件 
删除组件


    
吸顶1
    

        
我是内容
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
        
我是内容
   
    
    
吸顶2
    

        
我是内容2
        
我是内容2
   
        
我是内容2
   
        
我是内容2
   
        
我是内容2
   
        
我是内容2
   
        
我是内容2
        
我是内容2
   
        
我是内容2
   
        
我是内容2
   
        
我是内容2
   
        
我是内容2
  
    
    
吸顶3
    

        
我是内容3
        
我是内容3
   
        
我是内容3
   
        
我是内容3
   
        
我是内容3
   
        
我是内容3
 
    

css

.parent-content {
    width: 400px;
    height: 400px;
    background-color: #bfbfbf;
    overflow: auto;
}
.content {
     width: 100%;
     height: 600px;
     background-color:thistle;
}

.sticky {
    position:sticky;  
    width: 100%;
    height: 40px;
 }

 .sticky-1 {
    top:0;
    background-color: lightseagreen;
 }

 .sticky-2 {
    top:40px; /* top值是sticky内容1倍 */
    background-color:blue;
 }

 .sticky-3 {
    top:80px;  /* top值是sticky内容2倍 */
    background-color:blueviolet;
 }

效果；

默认效果

滚动时效果

 折叠后效果