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

当div完全进入视区后,如何在页面底部粘贴div?

当div完全进入视区后,可以使用CSS的position属性和JavaScript来实现在页面底部粘贴div。

首先,在CSS中设置div的position属性为fixed,bottom属性为0,这样可以将div固定在页面底部。例如:

代码语言:txt
复制
#stickyDiv {
  position: fixed;
  bottom: 0;
}

然后,在JavaScript中监听页面滚动事件,当div完全进入视区时,将其添加到页面底部。可以通过获取div的位置和页面滚动的距离来判断div是否完全进入视区。例如:

代码语言:txt
复制
window.addEventListener('scroll', function() {
  var stickyDiv = document.getElementById('stickyDiv');
  var rect = stickyDiv.getBoundingClientRect();
  var windowHeight = window.innerHeight;

  if (rect.top >= 0 && rect.bottom <= windowHeight) {
    // div完全进入视区,将其添加到页面底部
    document.body.appendChild(stickyDiv);
  }
});

这样,当div完全进入视区后,它会被添加到页面底部,实现在页面底部粘贴div的效果。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络),可以加速静态资源的传输,提高网页加载速度。产品介绍链接地址:https://cloud.tencent.com/product/cdn

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

相关·内容

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

使用 position: sticky 使用 position: sticky 时,每个人都很快明白,口到达定义的位置时,元素会粘在那里。...这样做的原因是,一个元素被赋予sticky定位样式时,粘性元素的容器是粘性元素可以粘住的唯一域。这个元素没有其他元素可以浮动,因为它只能浮动在兄弟元素上,而作为唯一的子元素,它没有兄弟元素。...口位置与位置定义匹配时,元素将浮动,例如: top: 0px 。...Fixed - 项目固定时,它的行为与 position: fixed 完全相同,浮动在口的相同位置,从流中移除。...但你也可以使用它将元素粘贴底部。这意味着可以定义页脚具有粘性位置,并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。

28720

大白话详解Intersection Observer API

1.1 Intersection Observer API 出现的原因 因为在如今网页开发的过程中,常常需要判断某个元素是否进入了"口"(viewport),即用户能不能看到它。...因此官方就提出了Intersection Observer API,该 API 的出现就是为了高效的解决以下两大类问题: 某个元素是否可见,: 图片懒加载——图片滚动到可见时才进行加载 内容无限滚动...——当用户滚动到接近底部时直接加载更多,而无需翻页,给用户一种网页可以无限滚动的错觉 两个元素是否相交,: 检测广告的曝光情况——为了计算广告收益,需要知道广告元素的曝光情况 在用户看见某个区域时执行任务或播放动画... IntersectionObserver 对象被创建时,就会被指定所监听的根元素、阀值等信息。一旦 IntersectionObserver 被创建就无法更改其指定信息。...返回目标元素与口(或根元素)的交叉区域的信息 intersectionRatio 返回目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为

27710
  • 3分钟搞定图片懒加载

    什么是图片懒加载 图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页)。...页面滚动的时候需要去监听scroll事件,在scroll事件的回调中,判断我们的懒加载的图片判断是否出现在口内,如果出现在口内,则将data-src赋值到src。...,图片就会进入可视区域。...思路:页面滚动的时候需要去监听scroll事件,在scroll事件的回调中,判断滚动条是否滚动到最底部,如果是,则将将图片的 src 属性设置为data-src的值。...滚动到20张图的底部的时候,就会发出ajax请求,请求下一页数据。 ? 至此本文完,有疑问可以在评论随时交流哈。

    2.4K20

    pageadmin CMS网站制作教程:实例:如何制作一个报名表?

    ,点击模板管理, 9.2 点击views,进入模板管理页面 9.3 在顶部找到菜单并点击,再点击新建目录,开始新建目录, 9.4 填写好之后提交,再点击新建的目录, 9.5 进入栏目,找到菜单并点击...ctrl+C(复制),点击顶部导航网站,再点击左侧导航模板管理, 9.9点击views,再点击报名专栏,找到之前新建的文件,点击编辑 进入到编辑页面,使用快捷键ctrl+D(粘贴),将复制好的表单...,点击报名专栏; 可以看到报名表,但有些显示不完全,这就需要改div和css了 10.5 回到报名模型页面,在后台点击顶部导航的网站,再点击左侧导航的模板管理,再点击views,找到报名专栏,点击新建的模型页中的编辑...,进入到HTML编辑页面, 10.6 因为在前台页面显示的是全页面的表单,为了和其他页面宽度保持一致,我们需要给表单模型增加一个外层,在代码的最顶部加上,代码的最底部加上,然后给div添加class,或者在div中直接写css都可以,方法有很多,然后提交,回到前台页面查看,可以看到报名表页面和其他页面保持宽度一致了。

    2.5K30

    Vue首屏性能优化组件

    viewport交叉状态的方法,祖先元素与视窗viewport被称为根root,也就是说IntersectionObserver API,可以自动观察元素是否可见,由于可见visible的本质是,目标元素与口产生一个交叉...intersectionRect:目标元素与口或根元素的交叉区域的信息。...intersectionRatio:目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0。...这里是简单的实现逻辑,通常observer的使用方案是先使用一个div等先进行占位,然后在observer监控其占位的容器,容器在时加载相关的组件,相关的代码在https://github.com...使用npm run dev运行之后可以在Console中看到这四个懒加载组件created创建的顺序,其中A的observer懒加载是需要等其加载页面渲染完成之后,判断在可视,才进行加载,首屏使能够直接看到的

    88420

    【JS】322- 手把手教你实现前端惰性加载

    除了 width和 height外的属性都是相对于口的左上角位置而言的。 ?...数据达到一定量的时候,事件绑定和循环位置计算会消耗大量的性能,每次调用 getBoundingClientRect() 都会强制浏览器 重新计算整个页面的布局 ,可能给你的网站造成相当大的闪烁。...交叉观察器: IntersectionObserver 就是为此而生的,它是HTML5新增的api,可以检测一个元素是否可见, IntersectionObserver能让你知道一个被观测的元素什么时候进入或离开浏览器的口...} else { //已完全进入完全离开 } }); } // 停止观察 observe.unobserve(element); // 关闭观察器 observe.disconnect...在页面底部有一个loading状态标签。一旦标签可见,就表示用户到达了页面底部,从而加载新的条目放在标签的前面。

    96330

    vue移动端开发总结

    iOS弹出键盘;软键盘唤起页面的 fixed元素将失效(iOS认为用户更希望的是元素随着滚动而移动,也就是变成了 absolute 定位),既然变成了absolute,所以页面超过一屏且滚动时,失效的...元素祖先的 transform 属性非 none 时,定位容器由口改为该祖先。...,与keep-alive相似,但是keep-alive保存状态无法识别路由的前进后退,而实际应用中,我们的需求是返回页面时,希望页面状态保存,进入页面时希望获取新的数据,使用vue-navigation...精确匹配只有当路由完全相同的时候才会被激活。...路由守卫 移动端的路由守卫一般不会太复杂,主要是登录权限的判断,我们设置一个路由白名单,将所有不需要登录权限的路由放入其中;对于需要登录的路由做判断,没有登录就跳转登录页面,要求用户进行登录在访问,如果登录需要返回原有路由就把目标页面的路由作为参数传递给登录页面

    4.1K30

    vue移动端开发总结

    iOS弹出键盘;软键盘唤起页面的 fixed元素将失效(iOS认为用户更希望的是元素随着滚动而移动,也就是变成了 absolute 定位),既然变成了absolute,所以页面超过一屏且滚动时,失效的...元素祖先的 transform 属性非 none 时,定位容器由口改为该祖先。...,与keep-alive相似,但是keep-alive保存状态无法识别路由的前进后退,而实际应用中,我们的需求是返回页面时,希望页面状态保存,进入页面时希望获取新的数据,使用vue-navigation...精确匹配只有当路由完全相同的时候才会被激活。...路由守卫 移动端的路由守卫一般不会太复杂,主要是登录权限的判断,我们设置一个路由白名单,将所有不需要登录权限的路由放入其中;对于需要登录的路由做判断,没有登录就跳转登录页面,要求用户进行登录在访问,如果登录需要返回原有路由就把目标页面的路由作为参数传递给登录页面

    1.3K40

    「实用推荐」如何优雅的判断元素是否进入当前

    用到了懒加载方案, 一个关键点是:需要判断元素是否在当前。 我们今天就看看这个问题。...---- 今天的主要内容包括: 使用元素位置判断元素是否在当前 使用 Intersection Observer 判断元素是否在当前 实例:懒加载 实例:无限滚动 实用 npm 包推荐 正文...比如说,你想跟踪 DOM 树里的一个元素,进入可见窗口时得到通知。...editors=0011 更多有用的属性 现在我们知道:被观测的元素部分进入可见窗口时会触发回调函数一次,它离开可见窗口时会触发另一次。 这样就回答了一个问题:元素 X 在不在可见窗口里。...一旦页尾栏可见,就表示用户到达了页面底部,从而加载新的条目放在页尾栏前面。

    1.4K20

    关于H5在移动端弹出下拉选项时遮挡输入框的问题

    背景 在最近的一个Hybrid App项目中,我实现的H5有以下两个需求: 使用quill.js实现富文本编辑器,但是,工具栏需要固定定位到底部输入法弹出时,工具栏需要悬浮在输入法键盘之上,如下图所示...,这种方式不推荐使用,第一个原因是因为这么处理相当于是改变了ios默认的处理机制,H5放到其他ios app中使用时,还是会出现同样的遮挡问题;第二个原因是将H5的业务与端的强耦合在一起 在ios...,最终,我们确定的方案是由端来实现富文本编辑器,H5来实现编辑的预览页面 下拉选项遮挡输入框的问题 对于文本输入框之所以不会遮挡,是因为文本输入框进行输入时,弹出的是系统级的输入法键盘,所以不会遮挡。...但是对于下拉选项而言,弹出框的下拉选项是我们自己实现的,也就不是系统级的,所以,系统不会对其进行处理,:将聚焦的输入框推动到可视范围之内,因此,会导致遮挡问题。...对于这个问题的解决需要分为以下几步: 如果滚动的高度小于屏幕的高度,说明需要在底部填充空元素div来将页面撑开,产生垂直滚动条,以便将输入框顶上去,这个div的高度为弹出框的高度,暂定为popH,对于这种情况

    5.4K30

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

    这里我使用margin:0 auto,这基本上将顶部和底部的margin重置为零,并使其左侧和右侧为auto。 使用此功能会有一些后果,这将在本文后面介绍。...口大小小于 wrapper 的最大宽度时,这将导致 wrapper 边缘粘在口上。...Wrapper 的display类型 由于wrapper 是,因此默认情况下它是块级元素。 问题是,要将wrapper内的内容放置在grid中时,该怎么办?...16px; } 在 wrapper 之间添加 margin 上面我们说到不建议使用简写版本来居中wrapper 元素: .wrapper { margin: 0 auto; } 虽然它可以工作,但页面上有多个...代码部署可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。 ----

    3.9K20

    手把手教你实现前端惰性加载

    除了 width和 height外的属性都是相对于口的左上角位置而言的。...数据达到一定量的时候,事件绑定和循环位置计算会消耗大量的性能,每次调用 getBoundingClientRect() 都会强制浏览器 重新计算整个页面的布局 ,可能给你的网站造成相当大的闪烁。...交叉观察器: IntersectionObserver 就是为此而生的,它是HTML5新增的api,可以检测一个元素是否可见, IntersectionObserver能让你知道一个被观测的元素什么时候进入或离开浏览器的口...} else {      //已完全进入完全离开    }  });}// 停止观察observe.unobserve(element);// 关闭观察器observe.disconnect();...实现下拉无限滚动: 在页面底部有一个loading状态标签。一旦标签可见,就表示用户到达了页面底部,从而加载新的条目放在标签的前面。

    96710

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

    目录能在滚动区域完全显示的时候,即滚动区域高度大于所有目录子项高度总和的时候,不进行目录滚动,如上面的图 ① ; 目录不能在滚动区域完全显示的时候,目录需要滚动。...随着页面的滚动,目录将从头滚到尾,那么滚动的范围是从第一个子目录贴着滚动区域的顶部到最后一个子目录贴着滚动区域的底部为止; 页面在最顶部的时候,当前高亮的子目录肯定是第一个,随着页面的向下滚动,高亮的位置也在不断下移...,即中位线以下,此时目录的滚动距离将是滚动高亮子目录的底部位置到中位线的高度差,如上图 ②; 滚动的高亮目录处于中位线以下且最后一个子目录需要贴着滚动区域底部,此时目录的滚动距离将是滚动列表底部到滚动区域底部的高度差...浏览器口高度变了怎么办 因为我们的滚动高度是根据浏览器口高度计算出来的,如果浏览器口高度变化了,那这个时候再去滚动页面,那肯定会出问题的。...所以需要做的就是把和口高度有关的逻辑抽离出来,统一放到一个函数里,监听到口高度变化的时候,再去执行这个函数。

    2.4K20

    图片—Markdown极简入门教程(5)

    如果你知道如何在Markdown中创建链接,则也可以创建图像。语法几乎相同。 图像也有两种样式,就像链接一样,它们都以完全相同的方式呈现。链接和图像之间的区别在于,图像的开头带有感叹号(!)。...(替代文字是描述障者的图像的短语或句子。)...[漂亮的老虎](https://upload.wikimedia.org/wikipedia/commons/5/56/Tiger.50.jpg) 尽管您不需要添加替代文本,但它将使您的内容可供包括障人士...[The founding father][Father]在Markdown页面底部,您将为标签定义一个图像,是这样的:[Father]: http://octodex.github.com/images...将第一个参考标签称为“黑色”,并使其链接到https://upload.wikimedia.org/wikipedia/commons/a/a3/81_INF_DIV_SSI.jpg;使第二个图片链接到

    1K20

    摸鱼的新发现,滚动条无限滚动

    滚动条滚动到某个位置的时候再次发送接口向后台再请求 n 条数据以此类推。...首先需要获取滚动条的位置,即可视的高度和内容区域底部距离可视页面顶部的距离,如果他们相等此时浏览器的滚动条当好滚动到页面底部,如果相差是负数说明浏览器的滚动条还没有到达页面底部。 ?...| 0), height: Math.max(container.clientHeight, window.innerHeight || 0), }; } 元素的大小及其相对于口的位置...这里的想法是当我们的浏览器滚动条滚动之后,滚动上去的内容不显示在页面上,只显示可视区域的,减少页面的负载,先看一下效果 ?...滚动条滚动回去的效果: ? 思路:通过监听内容上部超出可视区域的高度和设置每一个目录的高度的比值计算出超出的条数,判断渲染数据的下标和条数的大小来展示。

    1.9K40

    纯滚动怎么理解_scrollview不滚动

    前面的话   前面两篇博文分别介绍过偏移大小、客户大小。...元素未滚动时,scrollLeft的值为0,如果元素被水平滚动了,scrollLeft的值大于0,且表示元素左侧不可见内容的像素宽度   滚动条滚动到内容底部时,符合以下等式 scrollHeight...(){ clearInterval(timer); timer = 0; } scrollIntoView()   Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域...如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。...如果当前元素在口中可见,这个方法什么也不做   如果将可选的alignCenter参数设置为true,则表示尽量将元素显示在口中部(垂直方向)   [注意]该方法只有chrome和safari支持

    1.9K20

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

    虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天的实例,我们将用纯原生的方式进行实现,滚动条滚动至表格位置,固定表头位置,表格内容查看完,取消固定表头的功能。...今天我们将通过一个界面十分漂亮功能价格对比的表格,展示固定表头的功能,实例操作展示视频所示,滚动条滚动至表格位置,添加表头固定样式,滚动至表格底部,移除固定表头样式。...pageXOffset 设置或返回当前页面相对于窗口显示左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示左上角的 Y 位置。... 第一部分为页面标题内容,第三部分为内容介绍区域,这两部分非核心内容,只是用于内容占位,方便第二部分表格区域的展示,滚动此区域表头固定。...如果滚动到表格区域,获取重置的表头宽度。 接下来我们来判断第三部分内容区域距离口顶部的高度是否大于表头的高度。

    3.2K31

    Web 技术:CSS最小和最大(宽度高度)知识点及优缺点

    页面包装器/容器 最常用的`max-width`用例之一是页面包装器或容器。通过向页面添加最大宽度,我们可以确保内容对用户来说是可读的、易于浏览的。 ?...定义一个3ch的宽度,那么就只能装下 3个0。 元素,因此它已经具有其父元素的100%宽度,对吗? 考虑下面为模态设计简化的测试案例。 请注意,如果可用口空间不足,则宽度如何更改为其父级的100%。 ?...最小高度和粘性页脚 一个网站的内容不够长,它希望看到页脚粘到底部。让我们用一个可视化的例子来更好地展示这一点。 ? 请注意,页脚未粘贴在浏览器窗口的末尾。...修复,其外观应如下所示: ? 首先,将body元素作为flexbox容器,然后将其最小高度设置为口高度的100%。 事例源码:https://codepen.io/shadeed/pe...

    6K20

    深入学习下 CSS 间距相关的知识

    对多个元素进行分组设计时,用户可以通过它们之间的空间量来决定它们之间的关系。如果没有间距,用户将很难分清页面上哪些项目内容相关,哪些项目内容不相关。....element { display: flex; flex-wrap: wrap; } 口尺寸较小时,它们确实会在新行中结束, 见下图: 需要解决的是in-between设计状态,两个item...或者,它垂直堆叠时,这将如何在移动设备上工作? 很多很多的复杂性。 使用抽象组件 上述问题的一个解决方案是拥有抽象的组件,目的是托管其他组件。...它应该是灵活的,间距可能在 X 页面上,但不在 Y 页面上。 我在检查 Facebook 的新设计 CSS 时,首先注意到了这一点。...以下是我想到的一些问题: 间隔组件如何在父组件中获取其宽度或高度?它将如何在水平和垂直布局中工作?例如:堆栈内的间隔符与添加左侧空间的间隔符。

    13.4K40
    领券