这几天做账单列表,看见支付宝的账单的体验很舒服,于是自己想仿一个出来。但是过程中遇到了问题当时思前想后想用js来判断容器的位置,让容器之间相互产生交互。无奈自己太年轻了。
导致很多兼容不断在修复,于是乎,到思否提问,答主也特别的干脆:
于是我把代码改了一下,无需使用js既可实现。
支付宝账单图我就不截取了,附上成品。
就这种丝滑般的感觉。
标题那边就是显示日期
html代码
标题
这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表这是列表标题2
这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2这是列表2**加粗文字**css 代码body{
background: #eee;
}
.content{
padding: 10px;
}
.content .list{
background: #fff;
/*margin-bottom: 10px;*/
position: relative;
}
.content .list h2{
text-align: center;
padding: 10px 0;
position: sticky;
top: 0;
background: #f5f5f5;
width: 100%;
/*width: calc(100% - 20px);*/
}
.content .list ul{
padding-top: 40px;
}
.content .list li{
height: 20px;
line-height: 20px;
padding:10px;
border-bottom: 1px solid #f5f5f5;
}