首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用固定位置滚动左侧菜单

固定位置滚动左侧菜单是一种在网页或应用中常见的交互设计方式,它可以使左侧菜单在页面滚动时保持固定位置不动,只有内容区域滚动。这种设计有助于提高用户体验和导航效果,尤其在长页面或有大量内容的页面中非常实用。

分类:固定位置滚动左侧菜单属于前端开发中的交互设计和布局。

优势:

  1. 提供持续的导航:当用户在页面中滚动时,左侧菜单保持可见,方便用户随时切换和浏览不同的导航选项,避免了需要回到页面顶部才能访问菜单的情况。
  2. 节省空间:在页面有限的情况下,通过固定位置滚动左侧菜单,可以有效利用屏幕空间,将更多的内容展示在可视范围内。
  3. 提升用户体验:用户可以随时查看导航选项,不会因为页面滚动而迷失方向,提供了一种直观的导航方式。

应用场景:

  1. 长页面:当页面内容较长时,固定位置滚动左侧菜单可以让用户方便地在不同部分之间进行导航,提升用户体验。
  2. 多级导航菜单:对于有多级导航菜单的网站或应用,固定位置滚动左侧菜单可以确保用户一直能够看到导航选项,减少用户迷失的可能性。

推荐的腾讯云相关产品和产品介绍链接地址:

  1. 云服务器(CVM):提供弹性计算能力,支持按需购买、灵活扩容和自定义配置,满足不同规模应用的需求。详情请参考:https://cloud.tencent.com/product/cvm
  2. 腾讯云对象存储(COS):提供高可靠、低延迟的海量数据存储服务,适用于静态网站、图片、音视频等各种场景。详情请参考:https://cloud.tencent.com/product/cos
  3. 腾讯云内容分发网络(CDN):提供全球加速、高性能的内容分发服务,可将静态和动态内容缓存至最接近用户的节点,加速内容传输。详情请参考:https://cloud.tencent.com/product/cdn

以上是围绕固定位置滚动左侧菜单的完善且全面的答案,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 使用Vue来完成项目中的首页导航+左侧菜单

    动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 2.3.2...+ this[k]; } } 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 LeftAside.vue: 测试,通过控制台查看数据是否正常获取: 2.2.3 通过后台获取的数据构建菜单导航...2.2.3.1 先构建一级导航菜单 LeftAside.vue: 页面效果: 2.2.3.2 构建二级导航菜单 LeftAside.vue: 页面效果: 2.3 点击菜单实现路由跳转 2.3.1...系统首页配置 首先创建一个首页组件 配置路由: 配置首页菜单菜单图标可以到官网去查找。 设置登录成功后默认显示系统首页: 4....function(page) { this.page = page; this.qry(); } VUE3.0有兴趣的小伙伴可以去看看 以上就是一个简单的首页导航+左侧菜单的介绍

    2.4K20

    vue08首页导航和左侧菜单+mockjs介绍以及使用+登陆注册跳转

    系统首页 3.1 准备 3.2 Main.vue 3.3 配置路由 3.4 编辑登录组件 3.5 顶部组件显示折叠或展示图标 3.6 实现左侧栏折叠效果 ---- 1. mockjs 1.1 mockjs...mock.js官网 注:easy-mock,一个在线模拟后台的数据平台 1.2 mockjs使用步骤 1.2.1 安装mockjs依赖 # -D表示只在开发环境中使用 npm install mockjs...-D 1.2.2 在项目中引入mockjs 为了只在开发环境使用mock,而打包到生产环境时自动不使用mock,我们可以在env中做一个配置。.../assets/img/sq.png') } } } 3.6 实现左侧栏折叠效果 步骤: 1.TopNav.vue定义监听函数,监听折叠按键的click事件,并将折叠或打开的状态值通过自定义事件传递给...做到这里以上的首页导航和左侧菜单也就完成的差不多了,其他的下次在带给小伙伴们!!!

    1.3K10

    Framer 使用滚动变体创建动画

    您可以使用滚动变体”使导航栏在用户向下滚动页面时更改其外观,例如更改其背景颜色或调整元素的位置。或者在向下滚动页面时突出显示活动部分的侧边栏。...Demo1: 实现一个滚动到不同部分,修改导航栏的背景颜色的效果 创建导航栏组件 第一步就是创建一个导航栏组件 可以直接按下命令 K 并调出快捷菜单。...当黑色部分在浏览器视口中,导航栏使用默认的组件 当白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件 当黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件 效果: 我们可以看到 当滚动不到不同部分的时候...Demo2: 实现一个滚动到不同部分,更改左侧的icon图标 效果: 在上个效果的基础上,我添加了 渐变背景 填充了文本,并使用绝对定位固定到页面上. 给每个页面添加了 粘性布局, 达到视差的效果....第二步: 引入到页面上,使用固定定位,定位在指定位置. 第三步: 添加滚动变体效果,滚动到不同部分,选择不同的组件即可. 这里我就不把属性图进行贴出了, 和上面第一个创建方法一致.

    8210

    【Scratch入门到精通】blocks 积木区风格定制

    (不包括被积木分类菜单遮住的部分),随着滚动条的滚动,可视工作区中的内容在变化,但是可视工作区整体的宽度/高度是不变的。...积木分类菜单 左侧积木分类列表的菜单 积木弹出列表 点击积木分类菜单才弹出的积木块列表,宽度固定为250 工作区坐标 工作区有一个坐标系,积木放置的位置都是在这个坐标系中。 1.3....滚动位置 示例中把积木区垂直滚动条移动到了工作区左侧,其主要实现方式为重写scratch-blocks/scrollbar.js中的方法,重写后的方法如下。...点击查看scratch-examples使用 // 移动垂直滚动条到工作区左侧 ScratchBlocks.Scrollbar.prototype.resizeViewVertical = function...(hostMetrics) {} // 设置工作区水平滚动左侧流程滚动条厚度 ScratchBlocks.Scrollbar.prototype.resizeViewHorizontal = function

    2.5K20

    「大众点评点餐」小程序开发经验 03:事件联动

    结合上面的图片,菜单页的结构的交互需求很容易就整理出来了: 顶部要求显示商家名称,有分享功能。 下方左侧、右侧可分开滚动滚动左侧不影响右侧,滚动右侧左侧随之联动高亮显示所在的菜单分类。...滚动下方右侧菜品分类详情时,当该分类详情模块顶部接触到滚动区域的顶部,左侧对应的导航菜单栏高亮。...若左侧高亮的导航菜单不在可视区域: 当高亮的导航菜单顶部在左侧 scroll-view 滚动区上方(被遮住了),则将该高亮导航菜单滚动至将高亮导航栏的顶部与左侧滚动区域顶部重合(高亮菜单滚动区的第一个分类...通过查看 scroll-view 的相关文档,我们发现,可以使用 scroll-into-view 属性,自动定位右侧需要滚动到的具体位置。...由于小程序无法获取元素的宽高,位置信息,滚动右侧实现左侧联动效果的实现难度非常高。 如何准确的获取右侧滚动到的具体分类,并让左侧导航菜单栏相应分类高亮,且在可视的范围内?

    2.6K40

    Material Design — 按钮( Buttons)

    可以在以下位置使用扁平按钮: ·在 toolbars上 ·在提示框中,将按钮操作与对话框内容统一起来 ·Inline, with padding,因此用户可以轻松找到它们 ?...---- 底部固定按钮(Persistent footer buttons) 如果app要求操作持续存在且随时可供用户使用,请考虑使用悬浮响应按钮(Floating action button)或底部固定按钮...请勿在固定按钮区域使用浮动按钮。 ? 添加分隔后,底部固定按钮可用于滚动的提示框。 ?...在下拉菜单滚动的方式与Menus滚动的方式相同。 ? ? 一般的下拉按钮 溢出下拉菜单按钮 这种类型的下拉菜单默认显示箭头或者菜单按钮。点击按钮后会弹出菜单。...点击下拉箭头则会弹出所有状态菜单; 点击任意一个状态会改变当前的状态。 可编辑分段式下拉菜单按钮 可编辑分段式下拉菜单按钮的当前状态位置是可编辑的(例如用来选择文字大小的下拉菜单)。

    3.9K160

    【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发(侧边栏菜单生成、标签栏开发)

    页面比较简单,主要分为左侧菜单栏,顶部的导航栏(折叠左侧菜单,切换暗黑模式,员工账号名,退出登录),再下面的标签栏,之后就是主页面显示区域。...,并且层级较深,所以这里我们使用provide发送一下,在菜单组件那里使用inject进行接收。...这里需要讲的内容主要就是左侧菜单和标签栏,我们先来讲一下左侧菜单开发。...,还有一个小细节,就是当标签比较多了之后,我们通过侧边栏或者其他方式跳转到已经访问过的页面,如果该页面的标签被超出屏幕被隐藏了,我们需要把标签栏滚动到该标签的位置。...,比如首页,固定的标签栏不可关闭,这里是通过在菜单管理时候配置的是否固定标签栏,固定标签的排序顺序跟菜单排序顺序一样。

    4.1K31

    详细设计一个文章页目录插件

    ❞ 需求分析 位置 ? 首先我打算将文章的目录放置在文章内容的右侧,且是悬浮固定在那里不随浏览器的滚动滚动。...; 在合适的时候滚动目录列表,使得当前高亮的子目录会出现在滚动区域内部,且尽量处于滚动区域的中间区域; 当点击某个子目录的时候需要高亮当前点击的目录,且文章内容滚动到对应目录的位置,使得点击目录对应的文章标题所在的位置距离可视区域顶部的距离刚好等于一个固定值...28 moreHeight: 10, // 菜单左侧的线比菜单多出的高度 surplusHeight: 180, // 除了菜单高度+留白高度 delay: 200...28 moreHeight: 10, // 菜单左侧的线比菜单多出的高度 surplusHeight: 180, // 除了菜单高度+留白高度 delay:...// 菜单左侧的线比菜单多出的高度 surplusHeight: 180, // 除了菜单高度+留白高度 delay: 200, // 防抖的延迟时间

    2.4K20

    CSS固定定位与粘性定位4大企业级案例

    fixed 固定定位 相对于浏览器窗口进行位置调整 sticky 粘性定位 是基于用户的滚动位置来定位。 固定定位 相对于浏览器窗口进行定位,其它与绝对定位的特性一致。...常见的应用有:楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局 粘性定位 当滚动的高度>元素与浏览器的高度时,会以fixed固定定位显示...常见的应用有:吸顶盒导航,滚动吸附效果 1、楼梯式导航、浏览器右侧菜单、底部通栏(固定定位应用) 这三个案例用都是用固定定位来控制其与浏览器位置。...,右自适应后台管理界面布局 (固定定位应用) 顶部导航和左侧菜单相对于浏览器固定定位。...--左侧边栏--> <!

    1.6K30

    Axure实战06:创建一个AppleSymbol图标库网站

    首先是侧边导航栏,我们拖入一个动态面板放在左侧,在样式工具栏中,设置它的位置为0,0,尺寸是256*955,并填充动态面板的背景颜色为#001529。...为了让侧边导航栏放在左边,我们需要固定侧边导航栏的动态面板。 我们在样式工具栏中设置“固定到浏览器”,设置水平固定为“左侧”,垂直固定为“顶部”。 接下来完成里面的内容。...我们双击动态面板进入动态面板内部,拖入一个矩形1组件,在样式工具栏中,修改它的位置为(13,20),尺寸为230*52,填充颜色为透明色,线段宽度为0; 双击矩形1,输入文字“导航菜单”,字体大小为14...顺便设置它的样式,勾选“隐藏边框”,设置滚动模式为“从不滚动”。 交互动作-内容区域 我们希望点击侧边导航栏不同菜单的时候,内联框架展示不同的内容,而内联框架可以绑定我们已经创建好的页面。...在“中继器”的内页,一定要保证组件的位置为(0,0)。

    2.6K20

    Excel 信息筛选小技巧

    Step 2: 插入“切片器” 选中“表”范围内任意位置菜单栏“表设计”,点击“插入切片器”,选择需要筛选的列标题; 在“切片器”内选中任意条件,就可以很轻松的完成单一条件或多重条件的数据筛选...,具体使用方法简单摸索一下就会了; Step 3: 固定“切片器”位置 可以看到,当我们以“压力”作为筛选条件的时候,筛选出来的信息还是很多,需要滚动页面进行查看,但是在滚动页面的时候,“切片器”并不会跟随移动...,那么如果我们要再次修改筛选条件的时候,还需要将页面滚动回初始位置,才能够完整的看到“切片器”。...双击左侧“ThisWorkbook” 并在右侧敲入如下代码: 可以根据个人需要增加或减少需要固定的“切片器”,同时可以调整“切片器”所固定位置。 3....返回Excel界面,滚动页面,并点击任意位置,此时我们看到“切片器”会立即移动到界面指定位置。 5.

    1.7K20

    【图文教程】不需代码!Figma里这样完成悬浮FAB按钮制作,半小时搞定!

    我们可以更改任何图层的大小、位置、旋转、自动布局属性、约束、填充和描边。我们可以单独使用这些,也可以一起使用,这取决于我们追求的效果。...此外,由于此按钮在滚动时具有固定位置,因此我们可以在状态更改时保持对齐。 3.组织和对齐按钮 移出子菜单项并添加到操作按钮框架。确认“add”按钮层是顶层。...对于间距,我将“edit”对齐在“Add”按钮上方 32 像素,“speak”在“add”左侧 32 像素,最后是媒体,在“speak”上方 16 像素,在“edit”左侧 16 像素。...如果使用自动布局,请确保我们的框架高度和宽度设置为“固定”。 6.创建组件集,命名实例 我们将分别命名属性“状态”和变体打开和关闭。 7....我使用了默认的 300 毫秒。 9. 将动作按钮实例添加到框架,设置约束并检查固定位置 现在我们开始测试原型。向框架添加一个实例。将约束设置为右下角。最后,检查固定位置,以在滚动时将其保持在原位。

    2.5K20

    Android双向滑动菜单完全解析,教你如何一分钟实现双向滑动特效

    当用户手指向右滑动时,将右侧菜单隐藏,左侧菜单显示,然后通过偏移内容布局的位置,就可以让左侧菜单展现出来。...同样的道理,当用户手指向左滑动时,将左侧菜单隐藏,右侧菜单显示,也是通过偏移内容布局的位置,就可以让右侧菜单展现出来。原理示意图所下所示: ? 介绍完了原理,我们就开始动手实现吧。...如果手指移动距离大于左侧菜单宽度的1/2,或者手指移动速度大于SNAP_VELOCITY, * 就认为应该滚动左侧菜单展示出来。...,如果手指移动距离大于左侧菜单宽度的1/2,或者手指移动速度大于SNAP_VELOCITY, * 就认为应该从左侧菜单滚动到内容布局。...* * @return 如果应该从左侧菜单滚动到内容布局返回true,否则返回false。

    2.4K60

    Android实现双向滑动特效的实例代码

    当用户手指向右滑动时,将右侧菜单隐藏,左侧菜单显示,然后通过偏移内容布局的位置,就可以让左侧菜单展现出来。...同样的道理,当用户手指向左滑动时,将左侧菜单隐藏,右侧菜单显示,也是通过偏移内容布局的位置,就可以让右侧菜单展现出来。原理示意图所下所示: ? 介绍完了原理,我们就开始动手实现吧。...如果手指移动距离大于左侧菜单宽度的1/2,或者手指移动速度大于SNAP_VELOCITY, * 就认为应该滚动左侧菜单展示出来。...,如果手指移动距离大于左侧菜单宽度的1/2,或者手指移动速度大于SNAP_VELOCITY, * 就认为应该从左侧菜单滚动到内容布局。...* * @return 如果应该从左侧菜单滚动到内容布局返回true,否则返回false。

    2.1K40

    Android 酷炫自定义 View:高仿 QQ 窗帘菜单

    super.onMeasure(widthMeasureSpec, heightMeasureSpec); } (4)初始展示中间主体布局 这个就很简单了,HorizontalScrollView 默认的滚动位置是...0,所以就会展示左侧菜单,我们只要把滚动位置设置到左侧菜单宽度就行。...我们在滚动时,松手后应该能自动根据当前滚动位置关闭或者打开菜单。通常就是以菜单的一半作为分界线。...if(滚动距离 < 左侧菜单宽度一半) { 打开左侧菜单 } else if(滚动距离 >= 左侧菜单宽度一半) { 关闭左侧菜单 } else if(滚动距离 < 左侧菜单宽度 + 右侧菜单宽度一半...) { 关闭右侧菜单 } else if(滚动距离 >= 左侧菜单宽度 + 右侧菜单宽度一半) { 打开右侧菜单 } 上面这段逻辑如果不明白的可以多看几遍,明白这个逻辑后才能看下面的代码实现

    84810
    领券