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

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

图一是移动端的吸顶菜单

图二是pc端的吸顶菜单

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

...全文

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

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

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

打赏
举报

回复

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

加一个宽度100%属性

没有用啊

jio可 2019-09-14

打赏
举报

回复

加一个宽度100%属性

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

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

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

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

吸顶导航是现代网页中非常常见的交互效果，当页面滚动到一定位置时，导航栏自动固定在页面顶部，持续为用户提供操作入口，大幅提升浏览体验。本文使用原生 JavaScript 实现一套高性能、无抖动、兼容良好的吸顶导航组件，支持滚动触发吸顶、离开恢复原位、平滑过渡动画、背景色变化、响应式适配，零依赖、代码简洁、可直接用于企业官网、商城、博客、后台系统等各类项目

87,990

社区成员

224,684

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章