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

如何让主部分滚动,而左,右菜单和导航栏停留不动?

要实现让主部分滚动而左右菜单和导航栏停留不动的效果,可以通过CSS和JavaScript来实现。以下是一种常见的实现方式:

  1. HTML结构:<div class="container"> <div class="sidebar-left"> <!-- 左侧菜单内容 --> </div> <div class="main-content"> <!-- 主要内容 --> </div> <div class="sidebar-right"> <!-- 右侧菜单内容 --> </div> </div>
  2. CSS样式:.container { display: flex; } .sidebar-left, .sidebar-right { width: 200px; /* 左右菜单的宽度 */ position: sticky; top: 0; height: 100vh; /* 菜单的高度,可根据实际情况调整 */ overflow-y: auto; /* 超出菜单高度时显示滚动条 */ } .main-content { flex-grow: 1; height: 100vh; /* 主要内容的高度,可根据实际情况调整 */ overflow-y: auto; /* 超出内容高度时显示滚动条 */ }
  3. JavaScript代码(可选):window.addEventListener('scroll', function() { var sidebarLeft = document.querySelector('.sidebar-left'); var sidebarRight = document.querySelector('.sidebar-right'); sidebarLeft.style.top = window.pageYOffset + 'px'; sidebarRight.style.top = window.pageYOffset + 'px'; });

通过以上代码,左侧菜单和右侧菜单会在滚动时保持固定位置,而主要内容会出现滚动条并可以滚动。可以根据实际需求调整菜单和内容的宽度、高度以及滚动条的样式。

这种布局适用于需要在页面中保持固定菜单的情况,例如网站的导航菜单、侧边栏菜单等。在腾讯云的产品中,可以使用腾讯云的云服务器(CVM)来搭建网站,并使用腾讯云的云数据库(CDB)来存储数据。具体的产品介绍和使用方法可以参考腾讯云的官方文档和产品页面。

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

相关·内容

Material Design — 底部动作条(Bottom Sheets)

模态底部动作条停留在比app内容更高的高度;持久底部动作条与app保持在相同的海拔,并与其内容融为一体。...模态底部动作条可以显示长名称的菜单项,带说明的菜单项,带icon的菜单项。 当显示菜单项时,完全扩展的模态底部动作条与app 导航的最底端要保持最小8dp的距离。 ?...但是,这些深层链接可能不允许用户在打开的app中导航:它们可能只停留在初始层级,更深入,或者返回到初始层级。 或者,深层链接可以将用户从底部动作条导航到另一个视图。...:长列表可滚动,最多16:9    :不能与导航重叠,保留一个区域用户取消它 平板/pc(并不适用) 考虑在大屏幕上选择别的组件替代模态底部动作条,因为模态底部动作条可能会远离用户点击或触摸到的地方...:网格底部动作条    :长列表底部动作条 ---- 行为 1、底部动作条可以通过向下滑动底部动作条来关闭; 2、通过点击一个明显的控制按钮,例如在app导航中的“X”,或者触摸Android系统的后退按钮

1.9K71

html中下拉菜单(html做下拉菜单)

McGrak 2018-11-03 | 浏览19 次 HTML编程语言html5 |举报 答题抽奖 首次认真答题后 即可获得3次抽奖 html5下拉菜单怎么弄上拉菜单 HTML5如何才能让导航固定顶部不动...在没有设置position属性时,页面显示如下(见图1),T1并未遮挡住T2,但HTML5导航固定顶部不动且不遮挡住下面的DIV方法如下: 1,首先在html中,添加良好的导航内容。...3,在样式中,首先在菜单中定义一些样式。 4,此时,在运行页面时,滚动滚动导航将消失。...html select标签下拉框中怎么指定只显示5个 静态的数据:你写几个options就是几个选项 动态数据:把返回的数据取你需要的5个放到options中就行了呀 html5 + css3 做的下拉菜单部分手机浏览器中无法...html5下拉菜单跟父级菜单没对齐 估计是你没重置标签默认paddingmargin 加上这个代码试试*{padding:0; margin:0} 或都你直接在ul里把它的去掉它的默认padding

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

    若左侧高亮的导航菜单不在可视区域: 当高亮的导航菜单顶部在左侧 scroll-view 滚动区上方(被遮住了),则将该高亮导航菜单滚动至将高亮导航的顶部与左侧可滚动区域顶部重合(高亮菜单滚动区的第一个分类...另外需要注意的是,设置 scroll-into-view 引起的滚动操作,同样会触发 scroll 事件。 右侧滚动事件与分类自动滚动 滑动右侧、左侧滚动,是整个页面设计最核心的部分。...由于小程序无法获取元素的宽高,位置信息,滚动右侧实现左侧联动效果的实现难度非常高。 如何准确的获取右侧滚动到的具体分类,并左侧导航菜单相应分类高亮,且在可视的范围内?...点击左侧分类,右侧由于 scroll-into-view 触发了滚动事件,相应的滚动事件监听函数函数,计算得出当前高亮的导航菜单为 A,更新页面的 data 将高亮分类切换到了 A 上。...具体的思路是这样的:若点击左侧导航菜单,设定全局锁定状态,若锁定则不的联动操作,再解除锁定状态。 分类导航的可视性 通过上面「」联动,我们已经可以左侧随着右侧滚动高亮。

    2.6K40

    css规范化命名

    每次写之前写之后都想办法精简代码, 3:阅读的习惯是一眼能看完,整个结构内容,上下太长则每一行多放一些,左右太长则分行, 4:命名上,要体现层级关系,例如  层idcade,内层idcade-left...5:针对逻辑,需要把相关的放置在一起,并且大的逻辑块用空行分割, 6:针对每一个小块,要避免可能出现的逻辑问题,例如应该内容样式分离,并且,要防止出现重复。...:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content...:nav 侧:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center (2)导航 导航:nav 主导航:mainnav 子导航...:subnav 顶导航:topnav 边导航:sidebar 导航:leftsidebar 导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title

    88110

    Material Design — 菜单(Menus)

    :应用中的操作太多时将会设置一个菜单    :包含五个选项的菜单 菜单标签 按钮或控件的标签应该简洁准确地反映菜单内的项目(如下图)。...菜单通常使用单个单词作为标签,如“文件”,“格式”“编辑”。其他上下文可能需要更长的标签。 禁用菜单选项 菜单显示一组一致的菜单项。...:可通过“View”预测其中内容    :“Stuff”用户无法预测其中内容 情景菜单(Contextual menus) 情景菜单可根据app的当前状态动态更改其中可用的菜单项。...可以内部滚动菜单 级联菜单(仅限pc) 级联菜单可根据菜单与屏幕垂直水平边缘的接近程度放置菜单。 ?...理想情况下,嵌套的层级都需要做显示,因为很难用嵌套多层的子菜单进行导航。 ? 菜单项例子 不可用的操作 将操作显示为不可用(如置灰)不是将其删除,用户知道它们可以在正确的条件下存在。

    5.8K100

    根据 OS 设计你的应用

    根据图 1.4 不难看出,第一,iOS(Android()的主要操作栏位于不同的位置。苹果系统将其放置于界面下方, Android 系统将其放置在上方导航条的下方。...第三,Material Design 常用一种类似“汉堡”的图标表示菜单 Apple 不常使用这种导航方式。...图表 2.5 Evernote 主菜单 iOS vs Android) 菜单的设计也完全不一样。iOS 上的菜单有着全绿色的背景,占据了整页,这使它看起来像一个新页面不是菜单。...Facebook 在这两个平台上的区别主要在于导航的位置。如你在图 3.1 中所见到的,iOS 版本使用的是标准的 iOS风格的导航标准搜索。...图表 3.3 Facebook 搜索 iOS vs Android) 在搜索上的导航按钮同样是针对每个平台的。

    1.3K110

    如何规范 CSS 的命名和书写?

    10fb15c77258a991b0028080a64fb42d-1.png CSS命名规范(规则)常用的CSS命名规则 头header内容content尾footer导航nav侧sidebar栏目...column中centerright布局宽度wrapperleft登录条loginbar标志logo广告banner页面主体main热点hot新闻news下载download子导航subnav菜单menu...子菜单submenu搜索search友情链接friendlink页脚footer版权copyright滚动scroll内容content标签tags文章列表list提示信息msg小技巧tips栏目标题title...nav侧sidebar栏目column布局宽度wrapper左右中leftrightcenter (2)导航 导航nav主导航mainnav子导航subnav顶导航topnav边导航sidebar导航...leftsidebar导航rightsidebar菜单menu子菜单submenu标题title摘要summary (3)功能 标志logo广告banner登陆login登录条loginbar注册register

    1.1K20

    前端设计开发常用命名规则

    Header “header” 是网站页面的头部区域,一般来讲,它包含网站的logo一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader). 3....Navbar “navbar“等同于横向的导航,是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”. 4....Menu “Menu”区域包含一般的链接菜单,这部分还可以命名为: “subNav “, “links“,“sidebar-main”. 5....)、bigdiv(大div)、leftdiv(分栏)、rightdiv(分栏)、leftfloat(浮动)、rightfloat(浮动)、mainbox()、subpage(子页面/二级页面)...(2)导航 导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 导航:leftsidebar 导航:rightsidebar 菜单:menu

    2.6K50

    Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

    :聚焦前    :聚焦后 ? :选择前    :选择后 并非每屏都需要浮动操作按钮。 浮动操作按钮表示app中的最重要的操作。 ?...性质 使悬浮响应式按钮代表积极的操作,如创建,喜欢,共享,导航搜索。 ?...触发 悬浮响应式按钮可以简单地触发动作或在某处导航。 触摸波动的动画向外扩展导致UI变化。 工具 浮动动作按钮可以在按下时变换成工具。...滚动就消失的工具适用于: ·最开始进入时需要完整工具的屏幕 ·长列表顶部或底部需要完整工具的屏 当用户通过滚动表示他们有兴趣查看主要内容时,节省了屏幕空间。...不要在浮动操作按钮操作中放置溢出菜单。 从最初的屏幕应该最多只有两次点击就能到达预期的目的地。 ? 将溢出操作置于工具中的溢出菜单中,不是悬浮响应式按钮中。 ?

    5.8K90

    一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

    制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、头部导航思路参考 首先我们可以查看CSDN的博客首页,从中查看一下布局: 在以上首页中,我们可以得知其顶部为一个整行...接着打开APP 文本也可以去掉,只需要再加上右侧的头像即可,最右侧还有一个展开的菜单,在此咱们不不需要制作过多内容,所以该菜单也取消。 那如何使一部分内容靠左另一部分内容靠右呢?...我们查看首页的标题,我们可以把整个标题栏内容设置为左侧一个部分以及右侧一个部分: 左侧为logo 搜索框,右侧为头像框。...二、头部导航制作 思路搞清楚了咱们开始制作头部导航吧,首先创建一个相对应用项目,随后点击前台创建一个页面: 点击页面后添加一个主要的行,该行将会包裹所有当前页面内容。...当然我们再次设置的不止有上下,当然还有左右内边距: 此时设置当前行背景色为白色: 接着设置一下整个页面的背景色为 ‘#e7e9ee’: 随后设置往头部之中添加两个行,一个命名为一个命名为

    1.5K20

    iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

    当你在导航中使用了分段控件,就不要再放标题以及其它多余控件了。 确保文字按钮之间拥有足够的空间。如果导航左边或右边的文字按钮之间的间距太小,那些文字看起来会像挤在一起一样,用户难以区分。...想要了解如何设计自定义图标,请参考本文第五章按钮图标(Bar Button Icons)部分。工具导航图标的颜色可以通过tintColor属性来设定。...重要 跟所有标准按钮图标相同,应当根据文档中说明的图标含义,不是只凭图标外观来使用这些工具图标导航图标。...合适的话,给用户提供不止一种获取窗格的方式。默认情况下,竖屏方向时只会展示右侧窗格,因此你需要向用户提供一个按钮(通常位于导航上)来用户唤起隐藏窗格。...繁冗的文字词组不方便用户浏览理解。以上所有单元格样式均会自动截断文本,文本截断所造成的问题可大可小,取决于你采用的单元格样式,以及被截断了哪一部分文字。

    10.1K51

    Demoo使用秘籍,比好用更好用 - 腾讯ISUX

    涉及技巧:图片排序 Demoo支持我们对图片进行拖动排序整理,在标题区域鼠标停留,即可发现鼠标指针变为十字型,此时可拖动页面。...Step3.为长页面固定滚动区域 涉及技巧:记住顶部bar底部导航的高度,准确设定滚动区域不留白 以图示为例,动态页面非常长,需要模拟页面滚动的效果,实际app中,顶bar底部导航是不会动的,这时候...如图所示页面左边的一排手指,就是用来设定手势的,从上到下分别对应滑、滑、上滑、下滑的手势操作,可以根据需要选择。...双击手势,即可出现热区尾巴一样的蓝色连接线,在对应需要停留的页面点击即可完成手势操作的设定,完成后,手指变成蓝色,示意有手势操作。图中,我给了这个页面一个滑返回到首页的操作,模拟手势返回。 ?...有一个技巧是,可以将原型添加到桌面,且只要设置好,Demoo可以做到app的图标闪屏完整模拟,你体验从手机桌面打开app的真实感!

    1.5K40

    Flutter常用的布局事件示例详解

    以及手势事件滚动事件的使用 Scaffold 导航的实现,有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单等 const Scaffold({ Key key, this.appBar...,//侧滑菜单 this.endDrawer,//侧滑菜单 this.bottomNavigationBar,//底部导航 this.backgroundColor,//背景颜色 this.resizeToAvoidBottomPadding...: true,//自动适应底部padding this.primary: true,//使用primary色 }) Flutter 中自带的material样式的标题,首先看一下AppBar具有哪些属性...this.highlightElevation: 12.0,//高亮阴影 @required this.onPressed,//点击事件 this.mini: false//是否使用小图标 }) 底部导航...PageView 类似Android中的ViewPage组件,他还可以实现底部导航的效果 Flutter官网PageView 首先看一下PageView有哪些属性,代码如下: PageView({

    2.2K40

    【软件开发规范七】《Android UI设计规范》

    以下是一些常见的尺寸与距离: 顶部状态高度:24dp Appbar最小高度:56dp 底部导航高度:48dp 悬浮按钮尺寸:56x56dp/40x40dp 用户头像尺寸:64x64dp/40x40dp...辅助操作区至多包含两个操作项,更多操作需要使用下拉菜单。其余部分都是操作区。 ​...tab bar ​编辑 tab 指示器一样的字体颜色 ​编辑 被锁定滚动的 tab bar tab只用来展现不同类型的内容,不能当导航菜单使用。...编辑 ​编辑 输入框提示文字,可以在输入内容后,缩小停留在输入框左上角 ​编辑 整个点击区域增高,提示文字也是点击区域的一部分 ​编辑 通栏输入框是没有横线的,这种情况下通常有分隔线将输入框隔开...编辑 触摸提示(鼠标提示()的尺寸是不同的,背景都带有90%的透明度。 ​

    5.1K20

    团队合作时CSS的命名规范

    常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper...:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content...:nav 侧:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center (2)导航 导航:nav 主导航:mainnav 子导航...:subnav 顶导航:topnav 边导航:sidebar 导航:leftsidebar 导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title...使用”类别+功能”的方式命名,如 .barnews { } .barproduct { } 注意事项 1、一律小写; 2、尽量用英文; 3、不加中杠下划线; 4、尽量不缩写,除非一看就明白的单词

    96210

    Material Design — 底部导航(Bottom Navigation)

    更大的显示器,如pc端,可以通过使用侧边导航实现类似的效果。例如,紧凑的“rail”处理处理方式默认展示导航图标。 ? :移动端    :pc端 什么时候用?...超过6个就不要放在底部导航里了,太挤了 底部导航标签 当组合底部导航tabs时要注意,因为这样的组合可能会因为用户不知道二者的优先级而在导航时引起混乱。...---- 行为(这部分的动图去MD的网站看吧...) 底部导航可以从一个主题中的n级页面移动到另一个主题的一级页面。当用户去往下级页面时要保持底部导航可用,可通过持续展示,或者通过滚动隐藏显示。...底部导航icon 点击底部导航icon将直接带你到相关页面,或刷新当前页面。每个icon必须指向目的地,并且不能打开菜单或对话框。...滚动 底部导航滚动时可以动态地出现消失: ·向下滚动隐藏底部导航 ·向上滚动显示 手势 在内容区域上使用左右滑动手势不会在一级页面之间切换。

    4.1K90

    CSS 代码的书写规范、顺序

    不要随意使用id id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,不能滥用。 ? ?...CSS命名规范(规则) 常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧:sidebar 栏目:column 页面外围控制整体佈局宽度...:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyright 滚动:scroll 内容:content...:nav 侧:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center (2)导航 导航:nav 主导航:mainbav 子导航...:subnav 顶导航:topnav 边导航:sidebar 导航:leftsidebar 导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title

    3.6K101

    CSS命名规范

    (一)常用的CSS命名规则   头:header   内容:content/container   尾:footer   导航:nav   侧:sidebar   栏目:column   页面外围控制整体布局宽度...:subnav   菜单:menu   子菜单:submenu   搜索:search   友情链接:friendlink   页脚:footer   版权:copyright   滚动:scroll...:nav   侧:sidebar   栏目:column   页面外围控制整体布局宽度:wrapper   左右中:left right center   (2)导航   导航:nav   主导航:mainbav...  子导航:subnav   顶导航:topnav   边导航:sidebar   导航:leftsidebar   导航:rightsidebar   菜单:menu   子菜单:submenu...,使用”类别+功能”的方式命名,如   .barnews { }   .barproduct { }   注意事项:   1.一律小写;   2.尽量用英文;   3.不加中杠下划线;   4.尽量不缩写

    1.6K20
    领券