小程序数字化怎么布局(用position:sticky完美解决小程序吸顶问题的实现方法)
类别:Web前端 浏览量:236
时间:2021-11-03 15:58:24 小程序数字化怎么布局
用position:sticky完美解决小程序吸顶问题的实现方法最近一个项目甲方一定要两个tab菜单吸顶, 在网上找了好久没找到满意的,然后在一个博客中发现可以用position:sticky解决,因为之前没见过这个属性,然后搜了下,了解了用法,写了个小demo,发现挺好用的,完美解决不卡顿。
html:
<template> <view class=""> <view class=""> <view class="box"> </view> <view class="tabbar t1"> tabbar </view> <view class="box"> </view> <view class="tabbar t2"> tabbar </view> <view class="item" v-for="(item,index) in 20" :key='index' > {{item}} </view> </view> </view> </template> <script> </script>
css:
<style> .box{ height: 30vh; border: 1px solid #007AFF; } .tabbar{ background: #fff; position: -webkit-sticky; position: sticky; background: #4CD964; height: 50upx; } .t1{ top: -1upx; } .t2{ top: 50upx; } .item{ height: 100upx; margin-bottom: 20upx; background: #007AFF; } </style>
主要是
position: -webkit-sticky; position: sticky;
还要加个top值,离顶部多少距离吸顶
感兴趣的同学可以去
mdn–深入了解
到此这篇关于用position:sticky完美解决小程序吸顶问题的实现方法的文章就介绍到这了,更多相关position:sticky小程序吸顶内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- position零基础入门(position:sticky 粘性定位的几种巧妙应用详解)
- 小程序数字化怎么布局(用position:sticky完美解决小程序吸顶问题的实现方法)
- 省委书记出席的交流会,十位县委书记同场发言,代表公文材料的高水平(省委书记出席的交流会)
- 《刘老根3》热播,去世15年的她却再次被 伤害(去世15年的她却再次被)
- 十二星座爱情支配欲指数(十二星座爱情支配欲指数)
- 虐待儿童是发泄支配欲的愚蠢行为(虐待儿童是发泄支配欲的愚蠢行为)
- 你或许不知道你隐藏的支配欲望(你或许不知道你隐藏的支配欲望)
- 把宽体丰田86卖了,换成7.5代高尔夫GTI玩起姿态与性能并存的改装(把宽体丰田86卖了)
热门推荐
- docker安装部署及使用(docker在linux上的安装部署实例讲解)
- binlog怎么恢复mysql数据库(mysql5.7使用binlog 恢复数据的方法)
- 时间日期python实例(Python之时间和日期使用小结)
- django响应返回的常用方法(Django异步任务之Celery的基本使用)
- dockerregistry原理(解决Docker x509 insecure registry的问题)
- 浏览器为什么有跨域机制(详解window.open被浏览器拦截的解决方案)
- python如何抓取公众号文章(python爬取微信公众号文章的方法)
- 使用canvas画个正方形(canvas绘制树形结构可视图形的实现)
- sqlserver 数据量需要多少内存(SQL Server在AlwaysOn中使用内存表的“踩坑”记录)
- php实例说明(PHP中Static静态关键字功能与用法实例分析)