一秒钟实现吸顶效果：position:sticky

史上最简单的吸顶效果，没有之一，只用css一分钟搞定上下左右吸顶效果

参考资料：
张旭鑫的深入理解sticky：
https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/

css中的position:sticky，主要用于设计吸顶等炫酷效果。支持上下左右吸顶。

吸顶以及内部吸底效果

    
    
    
    


position:sticky 粘滞特性效果定位
1. position:sticky完全受制于它的父级元素，要实现它的特性，父级元素不能有overflow:visible以外的overflow设置，否则没有粘滞效果
所以sticky失效很大可能是父级设置了overflow:hidden;
2. 父级元素的高度值如果和粘性定位元素等高，也会使之失去粘滞特性
3. 粘滞效果定位可上下左右方向。所以扩展到父级元素宽度与粘性元素相等，左右粘性会消失。粘性定位设置：top,bottom,left,right
时间固定demo

    

        
5月27日
        

            
1
            
2
            
3
            
4
        
        
这是备注
    
    

        
5月26日
        

            
1
            
2
            
3
            
4
        
        
这是备注
    
    

        
5月27日
        

            
1
            
2
            
3
            
4
        
        
这是备注
    
    

        
5月26日
        

            
1
            
2
            
3
            
4
        
        
这是备注
    
    

        
5月27日
        

            
1
            
2
            
3
            
4
        
        
这是备注
    
    

        
5月26日
        

            
1
            
2
            
3
            
4
        
        
这是备注
    

左侧吸顶效果

    
    
    
    


吸顶效果的实现要注意两点：
1. 吸顶元素的父级不能出现除overflow:visible以外的overflow样式，所以滚动条就应该放在父级的外层。
2. 吸顶元素滚动到一定程度会被带走，而带走的条件就是它的父级所形成的粘性约束矩形滚动到了，把它带走了，所以如果你设置它的父级无限长
或高，或者滚动内容小于它的父级，那它就可以一直吸顶,gif中红线边框就是吸顶元素父级的粘性约束矩形，就是父级的长宽。

    

        

            这是头部
        
        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
    



    

        

            这是头部
        
        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8