多种方式实现吸顶效果

简介: 还是前两天的那个唱歌中间页,上线前发现滚动时候体验不好。因为之前没有做吸顶效果,搜索内容然后滚下去,没有找到内容需要再手动划上来。

方案一:JS 实现


js 无敌大法好。兼容极佳,但是体验上就比较感人了。这里不过多介绍。


方案二:Fixed 实现


fixed 是基于浏览器的定位,在组件中显的不是很适用。

而且在 iOS 也有兼容性问题。


方案三:Sticky 实现


sticky 是新加的 position 的值,可以用于实现粘性定位。

但是显示上会抖动,demo2


方案四:定高 + calc 实现


bVbGHsg.webp.jpg


demo3,组件接收一个 height 参数,用于设置组件高度,默认值是 100vh,下面放一下伪代码。


组件盒子{
    max-height: 100vh; 防止传进来的高度太高。
}
搜索盒子{
    height: 30px;人为的设置好高度
}
结果盒子{
    height: calc(100% - 30px);通过 calc 来写死高度
    overflow: scroll;这里 scroll 和 auto 都是可以的,不设置的话无法滑动
}


方案五:absolute + box-sizing 实现


demo4 因为 absolute 是基于第一个非 static 祖先定位,所以我们可以让搜索盒子基于组件盒子定位,下面伪代码。


组件盒子{
    max-height: 100vh; 防止传进来的高度太高。
    position: relative; 让里面的absolute基于自己定位
}
搜索盒子{
    height: 30px;人为的设置好高度
    position: absolute;设置为相对定位
    top:0;
    width: 100%; 决定定位的话宽度就没有了,防止漏出地下的内容。
}
结果盒子{
    height: 100%;
    padding-top: 30px; 上面加个展位空白格,防止看不到第一条
    box-sizing: border-box; 修改盒子模型,height = border+padding+content
    overflow: scroll;这里 scroll 和 auto 都是可以的,不设置的话无法滑动
}


相关文章
|
2月前
|
小程序
Flutter CustomScrollView 效果-顶栏透明与标签栏吸顶
Flutter CustomScrollView 效果-顶栏透明与标签栏吸顶
|
6月前
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
1469 0
|
8月前
|
小程序 前端开发 Android开发
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
545 1
|
8月前
|
前端开发
微信拖拽盒子movable-view点击事件失效问题
微信拖拽盒子movable-view点击事件失效问题
|
前端开发 容器
两栏布局的实现方式
两栏布局的实现方式
|
JavaScript
textarea 动态宽高(根据内容动态撑开宽高)
textarea 动态宽高(根据内容动态撑开宽高)
489 0
|
XML 存储 缓存
底部导航栏的几种实现方式
底部导航栏的几种实现方式
343 0
|
JavaScript 小程序 前端开发
uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度
uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度
1210 0
|
前端开发
css毛玻璃效果—附:子盒子背景跟随父盒子背景
css毛玻璃效果—附:子盒子背景跟随父盒子背景
css毛玻璃效果—附:子盒子背景跟随父盒子背景