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

固定的sidenav条带/非固定标题滚动后在顶部留下间隙

固定的sidenav条带/非固定标题滚动后在顶部留下间隙是一种常见的前端开发技术,用于在网页滚动时保持侧边导航栏(sidenav)的位置固定,同时在标题滚动到顶部时留下一定的间隙。

这种技术通常使用CSS和JavaScript来实现。下面是一种常见的实现方式:

  1. 首先,使用CSS将侧边导航栏设置为固定定位(position: fixed),并设置宽度、高度、背景颜色等样式。
  2. 接下来,在JavaScript中监听窗口滚动事件(scroll event),当滚动事件触发时执行以下操作:
  • 获取滚动的垂直距离(scrollTop)。
  • 获取标题元素的高度(headerHeight)。
  • 判断滚动距离是否超过标题高度。
  • 如果超过标题高度,则给侧边导航栏添加一个与标题高度相等的上边距(margin-top);否则,移除上边距。

这样,当页面滚动时,侧边导航栏会保持固定位置,而标题滚动到顶部时会留下一定的间隙。

这种技术在很多网站和应用中被广泛应用,特别是在需要长页面滚动的情况下,可以提供更好的用户体验和导航功能。

腾讯云提供了一系列与前端开发相关的产品和服务,包括云服务器、云存储、云函数等。您可以根据具体需求选择适合的产品。更多关于腾讯云前端开发相关产品和服务的信息,您可以访问腾讯云官方网站:腾讯云前端开发

请注意,本回答仅供参考,具体的实现方式和产品选择应根据实际需求和情况进行决策。

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

相关·内容

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

首先我打算将文章目录放置文章内容右侧,且是悬浮固定在那里不随浏览器滚动滚动。...首先需要根据文章内容二级和三级标题生成目录; 然后,页面从上到下滚动过程中,需要在右侧目录里高亮当前标题,而高亮原则是当前标题所在位置到浏览器可视区域顶部距离需要小于或等于一个固定值,如上图所示...; 合适时候滚动目录列表,使得当前高亮子目录会出现在滚动区域内部,且尽量处于滚动区域中间区域; 当点击某个子目录时候需要高亮当前点击目录,且文章内容滚动到对应目录位置,使得点击目录对应文章标题所在位置距离可视区域顶部距离刚好等于一个固定值...随着页面的滚动,目录将从头滚到尾,那么滚动范围是从第一个子目录贴着滚动区域顶部到最后一个子目录贴着滚动区域底部为止; 当页面顶部时候,当前高亮子目录肯定是第一个,随着页面的向下滚动,高亮位置也不断下移...,当高亮位置移动到目录滚动区域上半部分之前,这段不进行目录滚动,如上面的图 ② 到 图 ③ 变化过程; 当第一个子目录贴着滚动区域顶部,且高亮位置中位往下继续滚动时候,需要进行目录滚动滚动距离是当前高亮目录所在位置距离滚动区域中间位置高度差

2.4K20

CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件

layout_scrollFlags说明 value comment scroll 所有想滚动出屏幕view都需要设置这个flag, 没有设置这个flagview将被固定在屏幕顶部。...enterAlwaysCollapsed 当你视图已经设置minHeight属性又使用此标志时,你视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度 exitUntilCollapsed...滚动退出屏幕,最后折叠在顶端 【注意】: 设置了layout_scrollFlags标志View必须在没有设置View之前定义,这样可以确保设置过View都从上面移出, 只留下那些固定View...– (Tab宽度平均分配),也实现了可滚动选项卡 – (Tab宽度不固定,同时可以横向滚动),还实现了所有Tab居中显示。...固定Tab,TabLayout中居中显示 ? 可滑动Tab ?

2.1K30
  • 吸顶效果解决方案

    一.场景 “吸顶”是一种比较老交互方式,PC页面已经用了很多年了,如图: sticky 吸顶元素初始位置一般靠近页面顶部,但与顶部有一定距离,这块区域放是最醒目的元素,比如Banner图...页面向下滚动超过吸顶元素初始位置时,把吸顶元素固定顶部 要求吸顶元素一般是二级导航栏、搜索框、文章标题栏(h1)、表头(thead)、tab条等等,共同特点是在内容或功能上比较重要,但又不是最重要元素...(最重要元素通常固定在页面顶部,navbar-fixed-top) 二.PC解决方案 页面滚动到一定位置时,做一些事情 “回到顶部”按钮也是这样,页面向下滚动超过150px时,显示该按钮,否则隐藏...,iscroll等等 有前辈做了详细测试,见参考资料1 定时器在手指没有离开屏幕时不会执行,touchmove触发频率足够,也能拿到scrollTop,但touchend,惯性滚动期间,没有任何事件可用...,让页面滚动,转到吸顶状态,多个tab列表无缝切换,浏览状态互不影响 吸顶状态时划动当前tab列表,到头,让页面滚动,转到吸顶状态 也就是说,吸顶状态时,让tab列表不能滚动(overflow-y:

    3.5K10

    寒假提升 | Day9 CSS 第七部分

    粘性定位 sticky 另外还有一个定位值是position: sticky,比起其他定位值要新一些. sticky是一个大家期待已久属性; 可以看做是相对定位和固定(绝对)定位结合体; 它允许被定位元素表现得像相对定位一样...,直到它滚动到某个阈值点; 当达到这个阈值点时, 就会变成固定(绝对)定位; sticky是相对于最近滚动祖先包含滚动视口( the nearest ancestor scroll container...float 属性最初只用于一段文本内浮动图像, 实现文字环绕效果; 但是早期CSS标准中并没有提供好左右布局方案, 因此一段时间里面它成为网页多列布局最常用工具; 绝对定位、浮动都会让元素脱离标准流...元素、块级元素文字内容 浮动规则五 规则五: 行内级元素、inline-block元素浮动,其顶部将与所在行顶部对齐 2.3....练习一 - 去除间隙 浮动常用场景 解决行内级元素、inline-block元素水平间隙问题 2.4. 练习二 - 百度页码 2.5.

    78820

    动手练一练,手写一个价格对比、固定表头滚动表格

    虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天实例,我们将用纯原生方式进行实现,当滚动滚动至表格位置,固定表头位置,表格内容查看完,取消固定表头功能。...scrollTop: 代表在有滚动条时,滚动条向下滚动距离也就是元素顶部被遮住部分高度。没有滚动条时scrollTop==0恒成立。单位px,可读可设置。...offsetTop:当前元素顶部距离最近父元素顶部距离,和有没有滚动条没有关系。单位px,只读元素。... 第一部分为页面标题内容,第三部分为内容介绍区域,这两部分非核心内容,只是用于内容占位,方便第二部分表格区域展示,滚动此区域表头固定。...如果滚动到表格区域,获取重置表头宽度。 接下来我们来判断第三部分内容区域距离视口顶部高度是否大于表头高度。

    3.2K31

    CSS第五天-定位

    CSS第五天-定位 静态定位:static 定位默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来位置,进行定位 没有脱标,页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(静态)祖先元素来定位 子绝父相 脱离标准流,页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...---- 固定定位:fixed 永远根据浏览器可视区域定位,不会随着滚动滚动滚动 可以直接加宽高,默认宽度是内容宽度 脱离标准流,页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...display:none;(隐藏)、 display:block;(显示) visibility:hidden 隐藏元素本身,隐藏元素还占有位置 display:none 隐藏元素本身,隐藏元素不占有位置...:vertical-align baseline 默认 top 顶部对齐 middle 中部对齐 bottom 底部对齐 ---- 精灵图: 测量图片左上角坐标,分别取负值设置盒子background-position

    2.7K40

    CSS基础布局

    Flexbox * flexbox是有弹性,可伸缩 * flexbox本身就是 可以并列 * 可以指定 宽度 使用float布局 * 元素设置float,元素就脱离了文档流,但是不会脱离文本流。...) * 位置 先会向上靠 * 位置 再向左/右靠 * 对兄弟元素影响 * float元素 向上紧贴 float元素(当然 也可以是float元素) * float...(如果设计师直接给你固定宽度980页面,位置都定死的话,那么到移动端 是没有办法 做适配)所以 设计源头 就要想一些办法 去适配。...留下自适应空间:和两列布局类似,一列固定宽度 另一列随屏幕自适应。 (类似的思路,屏幕顶部 给logo固定宽度 logo右侧纯色背景 可以自适应)。...* 设计上:隐藏(不需要在移动端显示,就不让 移动端显示) 折行(pc端 横排东西,移动端可以少排一些 或者 竖排) 自适应(留下自适应空间)

    2.9K20

    生信教程:多序列比对

    MAFFT 服务器网站上“高级设置”标题下(向下滚动查看),您将找到可用对齐选项。第一个标题为“策略”灰色框中,您可以全局和局部对齐方法之间进行选择。...两个 AliView 窗口中,滚动到位置 1250 和 1350 之间区域。 16s_aln.fasta 窗口中,识别对齐不良区域(例如位置 1020 到 1040 周围)并尝试重新对齐。...为此,请通过单击路线顶部标尺来选择区域,如下面的屏幕截图所示。 选择对齐不良区域,单击 AliView “对齐”菜单中“重新对齐所选块”。...16s_filtered.fasta 中写入过滤比对,并在文件 16s_filtered.html 中以 HTML 格式可视化过滤比对。...浏览器中打开文件 16s_filtered.html。滚动浏览对齐并注意黑色对齐块。在对齐顶部,您将看到为每个站点以浅灰色和黑色绘制两个值。差距比例用浅灰色等号显示,范围从 0 到 1。

    70420

    CSS布局:完全掌握position属性

    static定位父元素定位  */ position: absolute; /**  * 固定定位,相对于浏览器窗口定位  */ position: fixed; /**  * 粘性定位,元素滚动时定位...: 20px;   left: 20px; } 绝对定位可以让元素脱离文档流,相对于距离最近static定位父元素进行定位。...四、固定定位应用 .fixed-item {   position: fixed;   top: 20px;   left: 20px; } 固定定位让元素相对于浏览器窗口进行定位,不会随着页面的滚动而改变位置...五、粘性定位应用 .sticky-item {   position: sticky;   top: 20px; } 粘性定位可以让元素滚动时按指定位置定位,到达指定位置则变为固定定位,不会影响其他元素位置...常用于实现顶部导航或滚动固定搜索框效果。

    32240

    Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

    app:expandedTitleTextColor : 指定展开标题文字颜色。 app:expandedTitleGravity : 指定展开标题文字对齐方式。...setExpandedTitleColor : 设置展开标题文字颜色。 setExpandedTitleGravity : 设置展开标题文字对齐方式。...只是许多App把这两者背景设为一样,所以看起来像是统一标题收缩和展开。...下面是标题折叠时显示渐变图片效果图: ?...具体滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠最小高度。然后头部固定不动,主体继续向上滚动。 向下滚动:头部固定不动,主体先向下滚动,一直滚到主体全部拉出。然后头部向下展开。

    3.3K30

    通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

    ,如果里面包含多个子View时,要想有折叠动画效果,必须把带有scroll flagview放在前面,这样收回view才能让正常退出,而固定view继续留在顶部。...,它可以控制包含在CollapsingToolbarLayout中控件响应layout_behavior事件时作出相应scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...同理这是展开时Title文字特点外形设置 app:contentScrim 这是toolbar 标题工具栏停留在顶部时候背景设置 app:expandedTitleMarginStart 设置扩张时候...与 Actionbar 相比,Toolbar 明显要灵活多。它不像 Actionbar 一样,一定要固定在Activity顶部,而是可以放到界面的任意位置。...除此之外,设计 Toolbar 时候,Google也留给了开发者很多可定制修改余地,这些可定制修改属性API文档中都有详细介绍,如: 设置导航栏图标; 设置Applogo; 支持设置标题和子标题

    2.3K90

    教你轻松做出像「饿了么」一样点餐界面

    简单地说,sticky 就是标题「粘粘」效果,向下滑动时跟着列表走、向上滑动到顶部时将会固定顶部。 ?...顶部蓝色条幅,就是 sticky 效果 如果不考虑不同浏览器兼容性,CSS 3 就有一个 position: sticky 属性,就能实现这种效果。 ?...只需要这两行就能实现,然而…… 不同浏览器中,这个属性兼容性,那是相当差。 小程序里,如何实现 sticky 效果?...但如果滑动右侧滚动条的话,左侧数据如何跟着变化呢? 假如不是小程序的话,应该很多人都知道怎么做——无非就是监听滚动条,判断滚动位置,然后根据区域去改变左侧选择。...如果提供了 callback 回调函数,执行 selectQuery exec 方法,节点信息会在 callback 中返回。

    95840

    Material Design —Tabs

    Tab标签应该简洁地描述其中内容。 由于滑动手势用于Tabs之间导航,请勿将Tabs与同样支持滑动手势内容配对。 类型 固定 滚动 Tab标签 标签标签可能包含icons和文字。...左:默认app bar和固定tab bar    中:延长app bar和固定tab bar    右:固定tab bar固定滚动内容顶部 ?...点击菜单中“book”tab bar ? 带有滚动标页码tab bar ? 选中tab bar时 何时使用 例如,使用选项卡组织高级别的内容,以呈现报纸不同部分。...当有许多或可变数量选项卡时,应使用可滚动选项卡。 ? 左:tabs用于包含了重要程度相似的内容中进行切换    右:重要程度参差不齐 Tab特征 Tabs控制一个始终如一位置显示内容。...选择文字标签时,请使用简短标题。 避免对内容进行交叉标签比较需要。 重要跨标签比较可能表明内容将从不同组织方式或展示方式中获益,从而使内容更接近。 ?

    2.4K100

    CollapsingToolbarLayout使用

    CollapsingToolbarLayout 可以看到,Toolbar标题放大并在下方显示,当我们向上滑动列表时,顶部Header部分图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式方式显示蓝色主题...关于CollapsingToolbarLayout属性官网上可以查到,这里我只介绍案例中我们常用几个属性:title标题,布局展开时放大显示图片底部,布局折叠时缩小显示Toolbar左侧。...注意,没有设置这个属性时,默认使用Toolbar标题;statusBarScrim顶部视图折叠状态下,状态栏遮罩色。通常这样设置:app:statusBarScrim="?...,如效果图中所示;contentScrim内容遮罩,上下滚动时图片上面显示和隐藏遮罩色,Toolbar位置背景色;通常这样设置:app:contentScrim="?...,比如上述效果图中图片;pin,固定别针效果,比如上图中Toolbar;layout_collapseParallaxMultiplier不折叠视差系数,配合parallax模式使用,取值有点类似alpha

    2.5K60

    React Native顶|底部导航使用小技巧

    简介 react-navigation主要包括导航,底部tab,顶部tab,侧滑等,分别为: 导航 -> StackNavigator 底部或者顶部tab -> TabNavigator 侧滑 -> DrawerNavigator...标题,也能配置navigation标题 TabNavigatorConfig tabBarComponent- 用作标签栏组件,例如 (这是iOS上默认设置), (这是Android上默认设置...activeBackgroundColor - 活动选项卡背景颜色 inactiveTintColor - 活动标签标签和图标颜色 inactiveBackgroundColor - 活动标签背景颜色...for (Android上默认标签栏)TabBarTop activeTintColor - 活动标签标签和图标颜色 inactiveTintColor - 活动标签标签和图标颜色 showIcon...(Android> = 5.0) pressOpacity - 按压标签不透明度(iOS和Android <5.0 only) scrollEnabled - 是否启用可滚动选项卡 tabStyle

    7.7K60

    CSS粘性定位 - 它真正工作原理!

    让我来解释一下: Relative 定位(或Static定位)- 粘性定位元素类似于相对定位和静态定位,因为它保持DOM中自然间隙(保持流中)。...Fixed - 当项目固定时,它行为与 position: fixed 完全相同,浮动视口相同位置,从流中移除。...Absolute 定位 - 粘附区域末尾,元素停止并堆叠在另一个元素顶部,就像绝对定位元素 position: relative 容器内行为一样。 贴在底部?...大多数情况下,使用 position: sticky 以将元素固定顶部,类似于这样: .component{ position: sticky; top: 0; } 这正是它被创建出来原因...这意味着可以定义页脚具有粘性位置,并且向下滚动时始终会出现粘在底部。当我们到达粘性容器末尾时,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部元素。

    28320

    html背景图片设置宽高_网页背景图片怎么设置

    在这种情况下,如果图像长宽比与盒子长宽比不同,则可能在图像任何一边或顶部和底部出现间隙。...) 容器空间大于图片时,随着允许空间尺寸上增长, 被重复图像将会伸展(没有空隙), 直到有足够空间来添加一个图像....当下一个图像被添加, 所有的当前图像会被压缩来腾出空间。...它属性值取值有:scroll、fixed、local。 (1)scroll:使元素背景页面滚动滚动。如果滚动了元素内容,则背景不会移动。...实际上,背景被固定在页面的相同位置,所以它会随着页面的滚动滚动。 (2)fixed: 使元素背景固定在视图端口上,这样当页面或元素内容滚动时,它就不会滚动它将始终保持屏幕上相同位置。

    5K10

    小程序开发基础-scroll-view 可滚动视图区域

    ,是因为滚动视图可以横向滚动和纵向滚动,bindscrolltoupper="upper"定义绑定事件,逻辑代码中编写,滚动顶部,触发scrolltoupper事件。...定义scroll-view时,要给它一个固定高度,通过wxss也可以内部样式,给设置个height属性,如style="height:200px;"。...(id不能以数字开头),设置哪个方向可滚动,则在哪个方向滚动到该元素 scroll-with-animation 表示设置滚动条位置时使用动画过渡 bindscrolltoupper 表示滚动顶部或左边...表示iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 class="scroll-view-item bc_green"中,wxss样式定义,高度为200px,如果没有就不会出现...,lower为滚动条滚到底部时候触发,scroll为滚动滚动触发,tap为点击按钮切换到下一个view,tapMove为通过设置滚动条位置实现画面滚动

    2.5K40
    领券