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

如何在到达底部时停止粘性侧边栏的固定位置

在到达底部时停止粘性侧边栏的固定位置,可以通过以下步骤实现:

  1. 监听滚动事件:使用JavaScript监听页面的滚动事件。
  2. 获取元素位置:通过DOM操作获取粘性侧边栏元素的位置信息,包括其相对于文档顶部的距离和高度。
  3. 计算滚动位置:根据滚动事件的scrollTop属性,计算当前滚动位置。
  4. 计算底部位置:获取页面内容的总高度,减去浏览器窗口的高度,得到页面底部的位置。
  5. 判断是否到达底部:比较当前滚动位置与页面底部位置的大小关系,判断是否到达底部。
  6. 控制固定位置:根据判断结果,通过修改粘性侧边栏元素的CSS样式,实现固定位置或取消固定。

以下是一个示例的JavaScript代码实现:

代码语言:txt
复制
window.addEventListener('scroll', function() {
  var sidebar = document.getElementById('sidebar'); // 获取粘性侧边栏元素
  var sidebarTop = sidebar.offsetTop; // 获取粘性侧边栏相对于文档顶部的距离
  var sidebarHeight = sidebar.offsetHeight; // 获取粘性侧边栏的高度

  var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 获取当前滚动位置

  var windowHeight = window.innerHeight || document.documentElement.clientHeight; // 获取浏览器窗口的高度
  var documentHeight = document.documentElement.scrollHeight; // 获取页面内容的总高度

  var bottomPosition = documentHeight - windowHeight; // 计算页面底部的位置

  if (scrollTop >= sidebarTop && scrollTop + windowHeight < bottomPosition) {
    sidebar.style.position = 'fixed'; // 到达底部之前,将粘性侧边栏固定在页面上
    sidebar.style.top = '0';
  } else {
    sidebar.style.position = 'static'; // 到达底部时,取消粘性侧边栏的固定位置
  }
});

这样,当页面滚动时,粘性侧边栏会在到达底部之前一直保持固定位置,当到达底部时,粘性侧边栏会取消固定位置,恢复正常的文档流布局。

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

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版(CDB):https://cloud.tencent.com/product/cdb_mysql
  • 云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iothub
  • 移动推送服务(信鸽):https://cloud.tencent.com/product/tpns
  • 区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云游戏引擎(GSE):https://cloud.tencent.com/product/gse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css粘性定位sticky

前言 发现很多博客侧边可以跟随滚动条移动到底部又可以继续翻看侧边,F12看了下代码,仅仅是用了一个sticky定位,下边我简单说一下sticky定位 内容简介: 讲 sticky 定位之前,我先说一下...fixed 生成固定定位元素,相对于浏览器窗口进行定位(老IE不支持),元素位置通 过"left", "top", "right" 以及 "bottom" 属性进行规定。...inherit规定应该从父元素继承 position 属性值。 sticky使用 粘性定位可以被认为是相对定位和固定定位混合。...元素跨越特定阈值前为相对定位,之后为固定定位,设置了以上样式元素, viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。...之后,元素将固定在与顶部距离 10px 位置,直到 viewport 视口回滚到阈值以下。

1.1K10

Framer 使用滚动变体创建动画

您可以使用“滚动变体”使导航在用户向下滚动页面更改其外观,例如更改其背景颜色或调整元素位置。或者向下滚动页面突出显示活动部分侧边。...解释: 触发方式我们选择Section In View, 这表示当某个部分到达视图触发....触发时机呢,就是ViewPort, 视口顶部,中部,底部到达浏览器窗口顶部 触发次数: 重复重复,即滚动下去触发一次, 滚动上去也依然会触发一次. To状态,组件变化....Demo2: 实现一个滚动到不同部分,更改左侧icon图标 效果: 在上个效果基础上,我添加了 渐变背景 填充了文本,并使用绝对定位固定到页面上. 给每个页面添加了 粘性布局, 达到视差效果....具体步骤: 第一步: 我们创建一个组件, 引入3个图标(Framer内置了,可以import里面找到). 第二步: 引入到页面上,使用固定定位,定位在指定位置.

4910

css精髓:这些布局你都学废了吗?

1 2列布局 2列布局使用频率也非常高,其实现效果主要就是将页面分割成左右宽度不等两列。一般宽度较小一列会设置为固定宽度,作为侧边之类,而另一列则充满剩余宽度,作为内容区。...实现思路很简单,侧边宽度固定,设置绝对定位,使其脱离文档流,内容区域通过calc()函数计算剩余宽度并设置宽度,再加一个margin-left,值为侧边宽度。...width: calc(100% - 100px); background: red; margin-left: 100px; } flex属性 通过flex属性实现思路也很简单,将父元素设置为flex,侧边宽度固定...当页面高度小于浏览器高度,下部分应固定在屏幕底部;当页面高度超出浏览器高度,下部分应该随中间部分被撑开,显示页面最底部。...粘性布局(sticky) 粘性布局是什么呢?我们先来看看效果演示 没错,其实就是页面滚动时候保持元素(这里是标题)页面视图上方,也就是我们常常看到 吸附效果。 标题行设置了背景色。

1K30

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

使用 position: sticky 使用 position: sticky ,每个人都很快明白,当视口到达定义位置,元素会粘在那里。...当它正常工作,元素会"粘"一定位置,但在滚动其他部分,它又会停止"粘"住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题根本原因,所以决定深入研究sticky定位。...Fixed - 当项目固定时,它行为与 position: fixed 完全相同,浮动视口相同位置,从流中移除。...Absolute 定位 - 粘附区域末尾,元素停止并堆叠在另一个元素顶部,就像绝对定位元素 position: relative 容器内行为一样。 贴在底部?...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置,并且向下滚动始终会出现粘在底部。当我们到达粘性容器末尾,元素将停留在其自然位置。最好将其用于自然位置粘性容器底部元素。

25320

如何使用 CSS 设置和自定义水平和垂直滚动条

本节中,我们将按照以下步骤创建一个可滚动侧边导航:a)创建带有导航项目的导航b)将导航样式设置为侧边c)将侧边位置设置为固定d)使用滚动条管理项目的溢出a)....将侧边位置设置为固定本节中,我们将专注于防止侧边滚动主要内容移动。我们希望将侧边样式设置为固定位置,以便主体可以自行滚动而不带上侧边。...下面的截图显示了侧边与正常内容流分开:固定溢出侧边上面的侧边具有固定位置。页面的正文继续滚动,但侧边保持在用户视图中。...以下代码片段包含了将侧边设置为固定位置样式,如上述截图所示。...从截图中可以看出,侧边底部看起来不像设置底部。这是因为内容比其容器高度长。在下一节中,我们将学习如何防止导航项目列表显示侧边之外。d).

1.2K00

CSS粘性定位是怎样工作

第一个例子中,大家很容易就能看明白 当视口到达定义位置,元素会被粘住。 例: ? 但问题是,它有时候能用,而有时却不起作用。 当它工作,元素会粘住,但在滚动到其他部分,它会停止粘贴。...粘性元素 —— 是我们用位置定义 position: sticky 样式。 当视口位置位置定义匹配,该元素将会浮动,例如: top: 0px 。 例: ?...固定 —— 当元素被粘住,它行为与 position: fixed 完全相同,浮动与视口相同位置,并从流中移除。...绝对 —— 粘贴区域末尾,元素会停止,并堆叠在另一个元素顶部,就像一个绝对定位元素被放在一个 position: relative 容器内行为。 粘在底部?...这意味着你可以把页脚定义为粘性,并且向下滚动使它看起来总是被粘在底部。 当到达粘性容器末端,元素会停在它自然位置。 最好是粘性容器底部为自然位置元素上使用它。

1.8K10

对定位深入理解与应用

定位元素:默认宽、高都被内容撑开,可以自由设置宽高 固定定位 如何设置为固定定位 给元素设置 position: fixed 即可实现固定定位。...固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。 固定定位元素,也能通过 margin 调整位置,但不推荐这样做。...无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。 粘性定位 如何设置为粘性定位 给元素设置 position:sticky 即可实现粘性定位。...粘性定位通常用于创建吸顶效果或侧边固定效果,当用户滚动页面,元素会始终保持视口内特定位置。...滚动属性(特别是 overflow: auto;)可以元素内容超出容器提供滚动条,使用户能够滚动查看全部内容,与粘性定位结合使用时,可以固定位置仍然允许内容查看和操作。

7910

Dash应用页面整体布局技巧

本文示例代码已上传至我Github仓库:https://github.com/CNFeffery/dash-master 大家好我是费老师,对于刚上手dash应用开发新手朋友来说,如何进行合理且美观页面整体布局构建是一道...示例2:粘性页首+内容布局 在前面的示例1中,若页面内容区域较长,页首部分会随着用户滚动页面而被滚上去,如果我们希望应用中页首部分一直紧贴页面顶端,就像下面的示例2所示: 最简单方式就是在前面示例...示例3:固定侧边菜单+粘性页首+内容布局 在前面的两个例子中,我们页面中充当导航作用只有位于页首右侧一级导航菜单,如果我们应用功能进一步复杂起来,需要在当前一级菜单对应页面下再设立二级导航菜单...,经典方式是像下面的例子那样,原本内容区中分出一部分宽度放置侧边菜单: 且为了更现代化交互效果,新加入侧边菜单是处于固定状态,与内容区域相互独立: 要实现这样经典页面布局效果,我们只需要在前面示例...2基础上,将下方内容区域改造成基于fac网格系统新布局即可: 其中涉及到固定侧边菜单部分,重点在于为菜单容器基于calc()动态计算高度值,即扣除页首高度之后剩余部分,并通过overflowY

42920

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

前面两篇文章为大家详细讲解了相对定位与绝对定位应用场景和案例。如果想了解可以公众号里面查看去看。本小节我们学习下固定定位与粘性定位应用场景和案例。...fixed 固定定位 相对于浏览器窗口进行位置调整 sticky 粘性定位 是基于用户滚动位置来定位。 固定定位 相对于浏览器窗口进行定位,其它与绝对定位特性一致。...常见应用有:楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局 粘性定位 当滚动高度>元素与浏览器高度,会以fixed固定定位显示...常见应用有:吸顶盒导航,滚动吸附效果 1、楼梯式导航、浏览器右侧菜单、底部通栏(固定定位应用) 这三个案例用都是用固定定位来控制其与浏览器位置。...--左侧边--> <!

1.6K30

站内SEO优化中相关文章调用及注意事项

20220312171150.png 1、内文相关模块推荐优势 1)增加网站PV,增加用户粘性。 2)降低跳出率,用户多点击推荐页面。 3)让网站更多页面相互连接,形成反向链接,提高内页排名。...若是摄影、旅游、健身等热门行业则可设置8-10篇文章,当然这也会根据网站大小来进行定义。 相关文章推荐一般设置文章内页底部或者侧栏位置,按照阅读方式与习惯,设置文章底部是最优选择。...其次是设置侧栏位置,当然文章质量度则非常重要了,最主要是方便用户。...3、其他文章推荐模块 优化网站过程中,为了提高网站粘性与浏览量,SEO可在网站首页或者内页设置相关文章、最近文章、热门文章以及随机文章等模块。...甚至会在侧边聚合周、月、年度等阅读排行榜,以此来吸引用户点击,这个文章阅读排行榜,可能就是这个行业或者这个网站关注度高问题了。

40800

「Shiny」应用程序布局指南

侧边布局 侧边布局是许多应用非常有用起点。该布局提供了一个侧边用于放置输入控件和一个大主区域放置输出控件。 ?...:它由多个不同子组件组成(每个组件都有自己侧边、选项卡或其他布局结构)。...collapsable 当浏览器宽度小于940像素(对于较小触摸屏设备上查看很有用),自动将导航元素折叠为菜单。...一般来说,我们建议使用 fluid 网格,除非您绝对需要由固定网格提供低层布局控制。 使用固定网格 Shiny 中使用固定网格与 fluid 网格效果几乎相同。...下面是前面简单侧边布局固定网格版本代码: ui <- fixedPage( fixedRow( column(2, "sidebar" ), column

7K32

最新iOS设计规范三|3大界面要素:(Bars)

(Bars) ,可以告诉用户APP中当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航、搜索侧边、状态、标签、工具。...iOS 13及更高版本中,可以通过删除导航阴影来隐藏导航底部边框(当滑动内容区域,边框会自动重新出现)。无边框样式大标题导航中效果很好,因为它增强了标题和内容之间联系感。...搜索可以单独显示,也可以显示导航或内容视图中。当显示导航,可以将搜索固定在导航中,以便始终可以调用。也可以将其折叠,当用户向上滑动展开显示。...例如,如果iOS设备上没有歌曲,则“音乐”应用中“立即收听”选项卡将说明如何下载歌曲。 始终附加视图中切换上下文。...例如:Safari中,当你开始滚动页面,工具会自动隐藏,因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。当弹出键盘,工具也会被隐藏。 ?

9.8K10

Flutter Drawer 侧边以及侧边布局

iOS原生开发中,实现抽屉视图还是比较麻烦,有时还需要借助第三方组件来实现。但是Flutter中,我们利用Drawer组件就可以很轻松实现抽屉视图。...简而言之就是,新建一个Drawer组件,然后配置给Scaffold组件drawer属性,这样就实现侧边抽屉视图了。...关于上面代码,有以下几点需要说明: 1,通过配置Scaffolddrawer属性,我们可以实现左侧侧边;通过配置ScaffoldendDrawer属性,我们可以实现右侧侧边。...2,配置了Scaffolddrawer属性或者endDrawer属性之后,flutter会自动帮我们顶部导航左侧或者右侧加上一个按钮,如下图所示: ?...那么,当点击抽屉视图中某个组件来跳转到另外一个页面,然后从这个页面返回时候,如何让抽屉视图消失呢?

5.4K20

5个最佳WordPress广告插件

您可以使用这些小部件侧边、页面、页脚、页眉和WordPress主题提供任何其他小部件区域中显示广告。  ...粘性广告广告插入选项Ad Inserter插入广告非常灵活,这是它强项之一。这包括手动插入或自动插入。...帖子内容顶部/底部在任何段落或标题之后(包括随机化)特定HTML元素处侧边/小部件使用简码或PHP函数手动放置页脚还有bbPress、BuddyBoss和BuddyPress集成,以便您可以轻松地社区特定位置插入广告...它具有自定义广告小部件,可在侧边和其他小部件就绪区域显示广告。没有您在此列表中其他一些插件中找到许多高级功能。另一个限制是您一次最多只能保存10个广告代码。...边小部件上最多支持10个广告代码。最多支持10个广告代码,用于帖子中特定位置和随机化。地理定位:将广告限制特定国家。设备定位:将广告限制特定设备上。

8.4K20

原 Intellij idea2017编辑

区域 左边提供了关于你代码辅助信息,并展示识别出各种各样图标(代码结构,断点,书签,指示器,变动人,代码折叠)。当然你可以从左侧边改变其行为。...侧边校验和标记 在编辑器右侧,展示绿色,红色,黄色框,代表ok,error,warn。你可以通过点击它快速定位到对应代码。...,按住shift,然后左键即可关闭 鼠标移动到你想要操作标签上 点击x号即可 ctrl+f4 镜头模式 当我们光标移动到侧边警告、错误、信息上,会出现一个小窗体。...连接行和文字 连接行 选择你要连接行 ? 按键Ctrl+Shift+J,直到达到你要效果 ? ? 连接文字 选择你要连接文字 ? 按键Ctrl+Shift+J,直到达到你要效果 ?...停止保存,键入你名字,此时会出现在edit|macros列表,你可以play它。 ![](.

2.8K60

【CSS】1287- 一行 CSS 实现 10 种强大布局

我们在这里做是将最小侧边大小设置为 150px ,但在更大屏幕上,让它伸展出 25% 。侧边将始终占据其父级水平空间 25%,直到 25% 变得小于 150px 。...第一列(在这种情况下,侧边项目其 minmax 为 150px(25% ),第二列项目(这里指 main 部分)占据其余空间作为单一 1fr 轨道。...通常称为粘性页脚,这种布局通常用于网站和应用程序,跨多个移动应用程序(页脚通常是工具)和网站(单页应用程序通常使用这种全局布局)。...经典圣杯布局:grid-template: auto 1fr auto / auto 1fr auto 对于经典圣杯布局,有页眉、页脚、左侧边、右侧边和主要内容。...,这里左侧和右侧边会根据其子项固有大小自动调整大小。

4.6K20

CSS中定位详解

布局很少用到。...固定定位妙用:如何将一个盒子固定在版心右侧(不管页面缩小放大,它一直版心右侧)。 先让固定定位盒子left: 50% ,此时这个盒子左边框会定位到浏览器/版心中间。...特点: 粘性定位以浏览器可视窗口为参照点移动元素。 粘性定位元素会占有原先位置。 使用粘性定位必须添加top、left、right、bottom 其中一个属性粘性定位才会生效。...粘性定位兼容性差。 应用场景:顶部通栏固定。 六、定位叠放次序(z-index) 语法: 选择器 { z-index: 1; } 使用定位进行布局时候,可能会出现盒子重叠情况。...left: 50%;  让盒子侧边框移动到父级元素水平中心位置。 margin-left: -50px;  让盒子向左移动自身宽度一半(假设盒子自身宽度为100px)。

1.4K30

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

本章中,你将学会如何使用Axure中继器和内联框架创建一个AppleSymbol图标库网站。...基础样式-侧边导航 我们先分析下AppleSymbol图标库网站结构,它由一个侧边导航和内容展示区组成,当我们点击侧边导航菜单,右侧内容区域将展示不同内容。...首先是侧边导航,我们拖入一个动态面板放在左侧,样式工具中,设置它位置为0,0,尺寸是256*955,并填充动态面板背景颜色为#001529。...为了让侧边导航放在左边,我们需要固定侧边导航动态面板。 我们样式工具中设置“固定到浏览器”,设置水平固定为“左侧”,垂直固定为“顶部”。 接下来完成里面的内容。...我们双击侧边导航进入内页,选中“导航菜单”,“交互”工具中,“单击”下点击“添加动作”,选择“框架中打开链接”,选择目标为“内联框架”,选择链接到“导航菜单”页面。

2.6K20
领券