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

如何使左侧div在到达其末端时固定,直到右侧较大的div完成

要实现左侧div在到达其末端时固定,直到右侧较大的div完成,可以通过CSS和JavaScript来实现。

首先,需要给左侧div设置一个固定的宽度,并将其设置为浮动(float: left),同时给右侧较大的div设置一个固定的宽度,并将其设置为浮动(float: right)。

然后,使用JavaScript来监听右侧较大的div的滚动事件。当右侧div滚动到底部时,将左侧div的position属性设置为fixed,使其固定在页面上。

以下是一个示例代码:

HTML部分:

代码语言:txt
复制
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS部分:

代码语言:txt
复制
.container {
  overflow: hidden;
}

.left {
  width: 200px;
  float: left;
}

.right {
  width: 600px;
  float: right;
}

JavaScript部分:

代码语言:txt
复制
var rightDiv = document.querySelector('.right');
var leftDiv = document.querySelector('.left');

rightDiv.addEventListener('scroll', function() {
  if (rightDiv.scrollTop + rightDiv.clientHeight >= rightDiv.scrollHeight) {
    leftDiv.style.position = 'fixed';
  } else {
    leftDiv.style.position = 'static';
  }
});

这样,当右侧较大的div滚动到底部时,左侧div就会固定在页面上,直到右侧div完成滚动。

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

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/ioe
  • 移动应用开发平台(MADP):https://cloud.tencent.com/product/madp
  • 对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯区块链服务(TBCS):https://cloud.tencent.com/product/tbcs
  • 腾讯元宇宙(Tencent Metaverse):https://cloud.tencent.com/product/metaverse

请注意,以上链接仅供参考,具体产品选择应根据实际需求和情况进行评估和决策。

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

相关·内容

每天一道前端面试题:左边宽度固定,右边⾃适应

左侧固定宽度,右侧⾃适应宽度两列布局实现 html结构 固定宽度 ⾃适应宽度... 在外层 div (类名为 outer ) div 中,有两个⼦ div ,类名分别为left 和 right ,其中 left 为固定宽度,⽽ right 为⾃适应宽度 ⽅...法1:左侧div设置成浮动:float: left,右侧div宽度会⾃拉升适应 .outer { width: 100%; height: 500px; background-color: yellow...:div进⾏绝对定位,然后再设置right=0,即可以实现宽度⾃适应 绝对定位元素第⼀个⾼级特性就是具有⾃动伸缩功能,当我们将width 设置为 auto 时候(或者不设置,默认为 auto )...div进⾏绝对定位,然后右侧div设置margin-left: 200px .outer { width: 100%; height: 500px; background-color: yellow;

41120

【前端就业课 第二阶段】CSS 零基础到实战(04)定位

而定位就是指对某个元素显示于文档流(页面)中某个位置,又或使某个元素脱离文档流进行显示,而在此所属脱离则是表示某元素不存在于文档流中,具体是如何咱们接下来详细说明。...: 此时将会看到,页面中淡青色元素将会往左侧索入,因为在当前 div 右侧无元素,但增加了距离右侧距离,那么此时只会往左侧缩入: 我们将 right 属性改为 left,该元素将会距离左侧有一定距离...div,但是本身位置还是存在,我们可以通过示例看出: index-z 使用绝对定位,若发生了覆盖,想使其中一个定位元素现实于另外一个定位元素之上,可以使用 z-index 属性,该属性可以更改当前页面元素层级...1.5 fixed 固定于窗口定位 定位为 fixed ,该div 将会悬浮于整个文档流内容之上,例如在浏览一些网页,某些可视区域(例如导航、搜索、广告等)将会一直固定于页面之上,示例如下: <...,增加了多个div效果如下: 使用了 fixed 定位后,元素将会固定于页面之上,而且不管你是否设置 fixed 何位置,效果都是一致,例如: 效果演示中还可以看到,

26220

商品添加到购物车动画getBoundingClientRect获取元素位置

1.2 用户滑动右侧内容左侧导航栏会响应式改变 右侧内容监听一个scroll事件,当触发滑动事件时候获取粘性定位在顶部标题,根据标题使导航栏定位到相应li var obj = element.getBoundingClientRect...listScroll() { // 为了达到联动效果,右侧滑动则改变左侧导航栏样式 var titles = document.getElementsByClassName('goodTitle...1.3 标题栏粘性定位 #el { position: sticky; top: 0; } 该元素定位表现为跨越特定阈值前为相对定位,之后为固定定位。...我们先将个数减少按钮和被选中物品个数numleft设为48px,使其被隐藏。点击添加按钮选择物品个数大于0则让left变为0达到一个缓慢弹出动画效果。...动画实现思路:用户点击添加将一个小球位置设置为被点击元素位置,且获取目的地位置(购物车位置),当小球抛出使其运动方式按照贝塞尔曲线过渡。

1.6K20

使用这种技巧,可以大大地提高前端布局效率

这可能会让用户非常恼火,尤其是大屏幕上。 ? 上图显示了当没有用wrapper进行包裹元素是如何展开,用户不应该体验这种行为。我们来解释一下背后原因。...但是,对于大屏幕,这是非常烦人。 对设计元素进行分组可以更好地增加间距。 没有wrapper情况下,将设计元素划分为列是不容易完成。...目前,建议使用简化版边距: .wrapper { max-width: 1170px; margin-left: auto; margin-right: auto; } 左侧右侧添加...要考虑重要事项是左侧右侧添加padding。 当视口大小小于 wrapper 最大宽度,这将导致 wrapper 边缘粘在视口上。...内容紧贴边缘 由于左侧右侧没有padding,因此内容将粘在边缘上。 这对用户是不友好,因为使内容浏览变得更加困难。 ? 大屏幕行长 大屏幕上,由于行长太长,段落文本可能很难看清。

3.9K20

【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )

一、开发要点分析 ---- 实现下图样式 : 中间部分是网页内容 , 左右两侧是 固定广告栏 , 不管浏览器如何滚动 , 缩放 , 该左右两侧广告栏不变 ; 标签结构分析 : 上述页面中 , 中心版心盒子...与 左侧广告栏 / 右侧广告栏 是兄弟关系 ; 左侧广告栏 使用 固定定位 , 该盒子浏览器左侧 , 距离顶部 100 像素 ; 右侧广告栏 与 左侧广告栏基本相同 , 只是将 左边偏移...改为 右边偏移 ; /* 固定定位 - 浏览器左侧元素 */ .left { position: fixed; /* 该盒子浏览器左侧 */ /* 上边偏移 0 紧贴顶部...- 浏览器右侧元素 */ .right { position: fixed; /* 该盒子浏览器右侧 */ /* 上边偏移 0 紧贴顶部 */ top: 100;

78430

【面试题解】你能用多少种方式实现两栏布局,三栏布局,圣杯布局,双飞翼布局??

感觉有帮助小伙伴请点赞鼓励一下~ 两栏布局 左侧宽度固定右侧自适应。 浮动法 左栏做浮动。 右栏添加 margin-left 。...并没有左侧,给它设置过相对定位,所以通过 left: -200px; 把 left 拉回最左侧; 同样,对于 right 区域,设置 margin-right: -100% 把 right 拉回第一行就行了...样式,使之横向撑满; 给 container 设置 display: flex,让成为弹性盒; 给 middle 设置 flex: auto 就行了。... 其它知识点 圣杯布局由于设置了相对定位,所以当 left 原来位置和 right 位置产生重叠,由于浮动原因一行放不下就会换行,当页面小于最小宽度布局就会乱掉...为啥 flex 和 gird 这么大行道,却还要知道如何用 float 布局呢?

38430

css布局使用

宽度都相同,其一般不会占满浏览器最宽宽度,但当浏览器宽度缩小低于最大宽度,宽度会自适应。...三列布局特征是两侧两列固定宽度,中间列自适应宽度。 之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏三列布局,布局思想有异曲同工之妙。...设置两侧栏top值都为0,设置左侧left值为0, 右侧right值为0。 对主面板设置左右外边距,margin-left值为左侧宽度,margin-right值为右侧宽度。...通过负边距将浮动侧栏拉上来,左侧负边距为100%,刚好是窗口宽度,因此会从主面板下面的左边跑到与主面板对齐左边,右侧栏此时浮动主面板下面的左边,设置负边距为负自身宽度刚好浮动到主面板对齐右边..."> 左侧边栏宽度固定 主内容栏宽度自适应 右侧边栏宽度固定

1.9K90

如何使用Grid中repeat函数

当浏览器变窄,"auto"列继续变窄,直到达到min-content阈值。 image.png 在上面的演示中,只有当每一列达到min-content阈值div 才会开始溢出容器。...image.png 每个 div 宽度必须至少为 200px。如果右侧有额外空间(小于 200 像素),div 会展开以填充空间。...当这一列宽度小于 200px div 就会开始溢出容器。 image.png 我们可以通过引入 min() 来防止溢出,接下来我们就来看看它。...image.png 浏览器正在计算容器中可以容纳多少个 div,并为它们留出空间。现有的每个 div 都有 110px 宽,左侧右侧空间也是如此。...在上图中,你可以看到末端列行编号仍然是 8,而 8 则堆叠在网格行 7、6 和 5 上方。 那么我们该如何看待这一切呢?

46630

CSS 中你需要知道 auto 一切!

是,如果我们将元素item宽度更改为100%而不是auto会发生什么? 该元素将占用其父项100%,加上左侧右侧边距。... 要使.item获得容器全部高度,我们可以使用以下方法之一: 给.wrapper一个固定高度,然后为.item元素添加height: 100% 对.wrapper使用...relative; } .item { position: absolute; left: 100px; width: 100px; height: 100px; } 如何较大视口中重设...例如,提示箭头指向左侧,另一个箭头指向右侧。 ?...Flexbox 和 自动边距 当谈到flexbox,它有无限可能性。 通过将其与自动边距相结合,我们可以构建功能强大布局。 考虑下面的例子 ? 我们右侧包含一行标题,描述和一个操作按钮行。

5.1K30

建议收藏!总结了42种前端常用布局方案

: 300px; width: 300px; background: #e599f7; } HTML 结构也是固定,就是一个父级,宽度继承了 宽度,还有一个子级,这里是固定300px...定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位, left 属性和 right 属性一起设置就会拉伸元素宽度,配合 width 属性与 margin 属性就可以实现水平居中。...4. float+overflow完成左列定宽右列自适应 步骤如下: 左侧元素开始浮动 右侧自适应元素设置overflow会创建一个BFC完成自适应 实现CSS代码如下: .left { /* 1....右侧自适应元素设置 overflow 会创建一个BFC 完成自适应 */ overflow: hidden; } 5....如果页面内容不够长,底部栏就会固定到浏览器底部;如果足够长,底部栏就后跟随在内容后面。

4.1K30

建议收藏!总结了 42 种前端常用布局方案

: 300px; width: 300px; background: #e599f7; } HTML 结构也是固定,就是一个父级,宽度继承了 宽度,还有一个子级,这里是固定300px...定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位, left 属性和 right 属性一起设置就会拉伸元素宽度,配合 width 属性与 margin 属性就可以实现水平居中。...4. float+overflow完成左列定宽右列自适应 步骤如下: 左侧元素开始浮动 右侧自适应元素设置overflow会创建一个BFC完成自适应 实现CSS代码如下: .left { /* 1....右侧自适应元素设置 overflow 会创建一个BFC 完成自适应 */ overflow: hidden; } 5....如果页面内容不够长,底部栏就会固定到浏览器底部;如果足够长,底部栏就后跟随在内容后面。

4.1K30

【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

, 下方网页内容会被顶部导航栏覆盖 , 这里需要设置一个上外边距 , 上外边距值大于等于 顶部导航栏高度 ; /* 顶部固定定位盒子高度 100px 由于脱标会覆盖标准流元素...此处标准流盒子设置 100px 外边距 防止被顶部固定定位盒子覆盖 */ margin-top: 55px; 由于设置 绝对 / 固定 定位 , 会将元素变为行内块元素 , 宽度是内部子元素宽度...设置左右两侧广告栏浏览器中垂直居中设置 ; 首先 , 将盒子顶部设置到浏览器垂直中线位置 , position: fixed; /* 该盒子浏览器左侧 */ /* 上边偏移...*/ margin-top: -150px; 完整代码示例 : /* 固定定位 - 浏览器左侧元素 */ .left { position: fixed; /* 该盒子浏览器左侧...: fixed; /* 该盒子浏览器右侧 */ /* 上边偏移 50% 之后减去 150 居中设置 */ top: 50%; /* 右边偏移 0 紧贴右侧 */ right

2.8K50

BFC(块级格式化上下文)与常见布局方案

普通流 (normal flow) 普通流中,元素按照 HTML 中先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整一个新行,除非另外指定...浮动 (float) 浮动布局中,元素首先按照普通流位置出现,然后根据浮动方向尽可能向左边或右边偏移,效果与印刷排版中文本环绕相似。...绝对定位 (absolute positioning) 绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对兄弟元素造成影响,而元素具体位置由绝对定位坐标决定。...折叠结果按照如下规则计算: 1、两个相邻外边距都是正数,折叠结果是它们两者之间较大值。 2、两个相邻外边距都是负数,折叠结果是两者绝对值较大值。... 由于左侧块级元素发生了浮动,所以和右侧未发生浮动块级元素不在同一层内,所以会发生div遮挡问题。可以给右侧元素添加 overflow: hidden,触发BFC来解决遮挡问题。

53430

【CSS】绝对定位元素设置 水平 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

: auto; 样式方式 令盒子水平居中 ; 举例说明 : 绝对定位 元素 需要居中对齐地方很多 , 如下图所示 , 右侧 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中 五个小圆点...容器需要居中对齐 ; 二、绝对定位 居中设置 ---- 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单方法就是 使用标尺测量父容器宽高 , 通过设置四个边边偏移量 , 设置元素...水平 / 垂直 居中 ; 2、先偏移50%再回退固定值 父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移方式设置居中就会出现问题 ; 先设置 50% 宽度 / 高度 偏移量 , 然后再往回退...盒子一半 宽度 / 高度 偏移量 ; 以 水平居中为例 : 200 x 200 大小盒子 , 通过设置 首先 , 设置 left 左边偏移为 50% , 让子元素左侧 移动到 父容器水平中心位置...水平 / 垂直 居中 ---- 为 80x80 像素尺寸元素设置 水平 / 垂直 居中 ; 设置水平居中 : 先设置子元素左侧移动到水平中心位置 left: 50%; , 再设置 margin-left

1.7K40

useLayoutEffect秘密

阻塞渲染 浏览器中,阻塞渲染是指当浏览器加载网页遇到阻塞资源(通常是外部资源如样式表、JavaScript文件或图像等),它会停止渲染页面的过程,直到这些资源被下载、解析和执行完毕。...举例来说,如果一个网页中引用了外部JavaScript文件,并且这个文件比较大或者加载速度较慢,浏览器会等待这个JavaScript文件下载完成后才继续渲染页面,导致页面在此过程中停滞或者出现明显加载延迟...如果一个非常慢浏览器被要求制定如何画猫头鹰指令,它可能实际上会是如下步骤: 第一步:画了两个圆 第二步:把剩余所有细节都补充完成 上述过程非常快。...,更新 HTML,将该 div 附加到 app,然后三次更改 div 边框。...它「将继续进行,直到完成,然后绘制最终结果」。

20210

css布局 - 工作中常见两栏布局案例及分析

2、腾讯课堂结构和上一个刚好相反,nav左侧,实现原理差不多。 首先,html也很语义化、相当标准:(学习了) ? 相信这么一张截图,你已经看穿了一切。 核心结构如下: ?...样式关键点: main父元素负责整体水平居中。 nav负责左边元素左浮动+可展示宽度220px mainCont负责占据右边剩余位置,在这里具体做法是让跟随左侧也形成浮动流。...然后宽度100%,浮动流世界里,mainCont再用margin-left不断向左逼近,直到把nav占据220px找补回来(margin-left:-220px)。自己心满意得盖住了nav。...左侧浮动: ? 右侧自适应,margin让出左侧范围。 ? html结构: ? 样式关键点: main负责控制总宽度和水平居中。...上边h2通栏因为内容左侧,所以直接设置了100%宽度(也就是没设置宽度) h2右侧内容,利用浮动会形成文字环绕效果。让该内容直接右浮动就自动绕开了nav空间。

2.7K11

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券