吸顶菜单移动端和pc的效果

平....... 2019-09-14 09:36:17

图一是移动端的吸顶菜单

图二是pc端的吸顶菜单

这是代码和布局，有没有大神知道怎么写才可以让移动端和pc端的效果一起啊

...全文

274 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

平....... 2019-09-14

打赏
举报

回复

引用 1 楼三岁打酱油的回复:

加一个宽度100%属性

没有用啊

jio可 2019-09-14

打赏
举报

回复

加一个宽度100%属性

本文深度解析mescroll框架的吸顶悬浮、轮播菜单与局部滚动三大高级特性。吸顶悬浮提升导航持续可见性；轮播菜单支持基础及吸顶双模式，适配电商分类等场景；局部滚动实现区域独立滚动，适用于弹窗、评论区等复杂布局。同时涵盖冲突解决、性能优化与常见问题排查等实战要点，助力Vue移动端高效开发。

本文详解使用原生JavaScript实现企业级滚动导航吸顶组件，涵盖智能吸顶判定、滚动位置驱动的导航高亮联动、CSS平滑过渡动画、滚动监听节流与点击防抖优化、移动端汉堡菜单适配及模块化设计。强调性能优化实践（如DOM缓存、高效区间判断）与响应式布局兼容性，提供完整可运行源码与配置化API，适用于官网、电商、文档等长页面场景。

本文介绍使用原生JavaScript实现滚动吸顶导航的核心方案，涵盖自动吸顶/恢复、平滑过渡动画、占位防布局抖动、滚动事件节流优化等关键技术。通过获取初始偏移量、动态切换CSS类、固定高度占位容器及性能优化策略，确保PC与移动端兼容、零依赖、高稳定性，适用于长页面导航、商品详情栏、后台菜单等场景。

本文围绕鸿蒙APP项目实战展开，旨在仿大众点评首页吸顶tab标签、横向滑动tab标签。因官方部分组件存在不足，通过自定义翻页组件、横向滑动tab组件实现效果。介绍了代码结构，阐述搜索栏、九宫格菜单、横向滑动tab标签吸顶的实现过程，还提及Swiper组件切换页面有重影的遗留问题。

本文介绍了如何用Axure实现移动端页面菜单栏吸顶效果。作者先指出网上教程多为PC端交互效果，接着以拉勾网为例，详细说明了准备素材、交互设置的步骤，包括使用this.y函数判断拖动距离，最后提醒不要混淆this.scrollY和拖动距离。

87,989

社区成员

224,684

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章