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

使div顶部的两个div固定在一些滚动后,并重新设置时再次滚动到顶部?

要实现使div顶部的两个div固定在一些滚动后,并重新设置时再次滚动到顶部,可以使用CSS和JavaScript来实现。

首先,需要给这两个div添加一个固定的位置,可以使用CSS的position属性来实现。将这两个div的position属性设置为fixed,同时设置top属性为0,即可将它们固定在页面顶部。

接下来,需要监听页面的滚动事件,当滚动到一定位置时,将这两个div的position属性设置为static,即取消固定定位,让它们随页面滚动。

最后,当页面再次滚动到顶部时,将这两个div的position属性重新设置为fixed,使它们重新固定在页面顶部。

以下是一个示例代码:

HTML部分:

代码语言:txt
复制
<div id="header">
  <div id="div1">Div 1</div>
  <div id="div2">Div 2</div>
</div>
<div id="content">
  <!-- 页面内容 -->
</div>

CSS部分:

代码语言:txt
复制
#header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f1f1f1;
}

#div1, #div2 {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

#content {
  height: 2000px; /* 设置一个较长的高度,用于测试滚动效果 */
}

JavaScript部分:

代码语言:txt
复制
window.addEventListener('scroll', function() {
  var header = document.getElementById('header');
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  
  if (window.pageYOffset > 100) { // 当滚动超过100像素时
    header.style.position = 'static'; // 取消固定定位
  } else {
    header.style.position = 'fixed'; // 固定在页面顶部
  }
});

window.addEventListener('scroll', function() {
  var header = document.getElementById('header');
  
  if (window.pageYOffset === 0) { // 当滚动到顶部时
    header.style.position = 'fixed'; // 重新固定在页面顶部
  }
});

这样,当页面滚动超过100像素时,两个div将取消固定定位,随页面滚动。当页面再次滚动到顶部时,两个div将重新固定在页面顶部。

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

  • 腾讯云主页:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云数据库 MySQL 版(CDB):https://cloud.tencent.com/product/cdb_mysql
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送、移动分析):https://cloud.tencent.com/product/mobile
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 元宇宙(Tencent Real-Time 3D):https://cloud.tencent.com/product/trtc
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

// //滚动到最顶部是否连续滚动到底部 // loopTop: true, // //滚动到最底部是否连续滚动顶部 // loopBottom: true...,设为true,则浏览器自带滚动条会出现,页面还是按页滚动,但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部padding...,当我们要设置一个固定在顶部菜单、导航、元素等使用 // paddingTop: "100px", // //设置每个section底部padding,当我们要设置一个固定在底部菜单...// //滚动到最顶部是否连续滚动到底部 // loopTop: true, // //滚动到最底部是否连续滚动顶部 // loopBottom: true...,当我们要设置一个固定在顶部菜单、导航、元素等使用 // paddingTop: "100px", // //设置每个section底部padding,当我们要设置一个固定在底部菜单

11.8K30

Js如何实现当网页超过一屏导航菜单始终置顶-吸顶盒效果

前言 我们平时在逛一些电商网站,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部 这是为了方便用户查看商品各类信息或提交订单购物 也就是吸顶盒效果,那这个效果是怎么实现..."); var scrollTop = 0; // 初始化为顶部 // 监听页面滚动事件 window.onscroll = function() { // 获取当前滚动距离...把顶部导航菜单设置固定 if(scrollTop > 150) { wrap.className = "fix-top"; // 固定顶部样式...总结 要想实现一个层始终固定在屏幕顶部或底部,就不得不使用csspositon样式,其次,在来控制网页是不是需要把导航菜单置顶,因为当网页内容浏览没有滑出导航菜单可见范围,是没有必要把导航菜单置顶...,因此,在代码中就需要监听网页滚动跳滑动事件 当超过一定范围以后,才有必要为导航菜单设置固定position样式 其实也有另外一种解决办法,就是导航栏始终是固定在顶部,当拉动滚动一定范围,

3.3K50

CSS 定位详解

这会导致元素位置不随页面滚动而变化,好像固定在网页上一样。 ?...div { position: fixed; top: 0; } 上面代码中,div元素始终在视口顶部,不随网页滚动而变化。...页面继续向下滚动,父元素彻底离开视口(即整个父元素完全不可见),#toolbar恢复成relative定位。 五、 sticky 应用 sticky定位可以实现一些很有用效果。...除了上面提到"动态固定"效果,这里再介绍两个。 5.1 堆叠效果 堆叠效果(stacking)指的是页面滚动,下方元素覆盖上方元素。...div { position: sticky; top: 0; } 它原理是页面向下滚动,每张图片都会变成fixed定位,导致一张图片重叠在前一张图片上面。详细解释可以看这里。

1.7K40

css中绝对定位_绝对定位和相对定位怎么用

滚动滚动,距离页面左上角位置不变。 2.使用bottom属性描述,是以首屏页面左下角为参考点来调整位置。...,与页面位置不变,跟浏览器位置没关系: bottom属性描述,以首屏页面左下角为参考点 如果浏览器不动,滚动条动时候,红色盒子跟随页面动,红绿盒子间距不变。...父辈元素设置了相对定位,则子元素绝对定位以父辈元素为参考点。 父相子绝,父绝子绝,父子绝,都是以父辈元素为参考点。父绝子绝,因为绝对定位脱离标准流,影响页面的布局。父相子绝是常用布局方案。...> 之前: 之后脱标: 定在屏幕上: 参考点 用top描述,以浏览器左上角为参考点 用bottom描述,以浏览器左下角为参考点,无论滚动条动还是浏览器底部上下移动...,设置top和left之后定在浏览器顶部 */ position: fixed; top: 0; left: 0; } .wrap .nav{ width

2.5K30

移动端吸顶fixbar解决方案

需求背景 经常会有这样需求,当页面滚动到某一个位置,需要某个页面元素固定在屏幕顶部,并且有时需要连续滚动吸顶。...问题 position:fixed给移动端带来问题: IOS8在页面滚动,吸顶不连续;页面滑动,不见吸顶,页面滚动停止,吸顶缓慢出现 滚动顶部之后,会出现两个一样吸顶, 过一会才恢复正常。...在目标区域在屏幕中可见,它行为就像position:relative; 而当页面滚动超出目标区域,它表现就像position:fixed,它会固定在目标位置。...安卓 滚动距离超过某位置,js动态设置样式;为了防止惯性滚动引起fix不及时情况,在 touchstart、 touchmove 、 touchend 事件都进行监听。...当滚动一定距离需要fixed在顶部节点 * @param {int} setting.top fixed之后距离顶部top值

2.9K30

CSS 定位详解

这会导致元素位置不随页面滚动而变化,好像固定在网页上一样。...div { position: fixed; top: 0; } 1 2 3 4 复制 上面代码中,div元素始终在视口顶部,不随网页滚动而变化。...页面继续向下滚动,父元素彻底离开视口(即整个父元素完全不可见),#toolbar恢复成relative定位。 # 五、 sticky 应用 sticky定位可以实现一些很有用效果。...除了上面提到"动态固定"效果,这里再介绍两个。 # 5.1 堆叠效果 堆叠效果(stacking)指的是页面滚动,下方元素覆盖上方元素。...div { position: sticky; top: 0; } 1 2 3 4 复制 它原理是页面向下滚动,每张图片都会变成fixed定位,导致一张图片重叠在前一张图片上面。

1.7K10

Bootstrap实战 - 单页面网站

二、知识点 2.1 滚动监听 滚动监听使用了 Bootstrap JavaScript 插件,根据滚动条所处位置自动更新选中导航栏。...并且给导航栏添加样式 navbar-fixed-top 使其固定在顶部不随滚动条移动而移动,但这样的话会遮住 body 上面的一部分内容,所以同时给 body 添加样式 padding-top: 60px...> 触发监听依赖 元素属性 id="nav-menu",滚动监听效果是由样式为 scrollspy(这里可以是任意值,只是做个示例)载体在其容器滚动条变化时,随着载体内容在视觉中变化...这时移到最顶部不能合理定位第一个导航部分,因为上面给了 body 元素一个 60px 内边距,这里给 body 元素增加一个属性 data-offset="60",使滚动监听在计算滚动位置是相对于顶部有一个偏移量...可以在官网定制页面设置自己需要: 通用 CSS 组件 JavaScript 组件 jQuery 插件 例如:滚动监听只需要导航栏组件,基础 CSS 样式和 Scrollspy JavaScript 插件

8.9K104

HTML中怎么做悬浮框?

通过悬浮框,我们可以为用户展示一些特定信息(如提示信息、广告信息),也可以在悬浮框中提供一些常用按钮(如“返回顶部”按钮、“分享”按钮)方便用户操作。 下面为大家展示一些网页中常见悬浮框效果。...(1)当用户使用百度进行搜索,在搜索结果页面的顶部会出现悬浮框。该悬浮框会一直悬浮在网页顶部,不受用户滚动页面的影响,如下图所示。...image.png (2)用户在腾讯网浏览新闻,右下角会出现两个小按钮,分别是“用户反馈”和“^”(返回顶部),这两个小按钮就是通过悬浮框来实现,如下图所示。...当对元素设置固定定位,该元素将脱离标准文档流控制,始终依据浏览器窗口来定义自己显示位置。不管浏览器滚动条如何滚动,也不管浏览器窗口大小如何变化,该元素都会始终显示在浏览器窗口固定位置。...-- 悬浮框结构 --> 返回顶部 上述代码中,第2~7行代码用于简单填充网页内容,使网页出现滚动

6.9K41

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

首先我打算将文章目录放置在文章内容右侧,且是悬浮固定在那里不随浏览器滚动滚动。...,如上面的图 ③ 图 ④ 变化过程; 如果这个高度差过于大,使得滚动最后一个子元素不能贴着滚动区域底部时候,则不按照这个高度差进行滚动,而真实需要滚动距离是最后一个子目录到滚动区域底部距离,...>` document.getElementById('arAnchorBar').innerHTML = retStr } 设置滚动监听事件 给 window 加上滚动事件,用于监听当滚动时候去做一些操作...但是这样会导致函数被频繁调用,从而存在性能问题,其实我们更希望当滚动开始滚动结束时候,只执行一次函数即可,那这个直接上防抖即可: // 防抖:触发高频事件 n 秒只会执行一次,如果 n 秒内事件再次触发...,即中位线以下,此时目录滚动距离将是滚动高亮子目录底部位置中位线高度差,如上图 ②; 滚动高亮目录处于中位线以下且最后一个子目录需要贴着滚动区域底部,此时目录滚动距离将是滚动列表底部滚动区域底部高度差

2.4K20

waypoint_使用jQuery Waypoint创建粘性导航标题

用户再次向上滚动,该类将从导航栏中删除,并返回其位置。 立即尝试。 酷吧?...但是,如果您缓慢向下滚动到刚刚创建航路点,您可能会注意,由于导航栏从内容流中删除,因此在传递,内容会“跳跃”一些。 除了看起来很草率之外,这种行为还可能使您部分内容模糊不清,并损害可用性。...所有这些都是标准jQuery票价:在nav添加或删除sticky类,我们便会使用.css()覆盖元素垂直位置,然后使用.animate()其设置为应有的水平。...它带有两个参数-滚动目标和包含不同选项对象,在这种情况下,这很容易解释。 单击链接href属性可以很好地用作滚动目标,并且用作顶部偏移表达式会将目标放置在视口高度15%处。...但是,只要有一些想象力以及jQuery基本知识,您就可以设计出一种方法,使这些元素在接近它们脱离功能区 。 但是,这样做远远超出了本教程范围。

3.3K30

Interection Observer如何观察变化

通过这种方式,你可以跟踪观看者遇到特定目标所花费时间。即使稍后将目标再次滚动到视图中,此属性也会提供时间。这可用于跟踪目标进入和离开根元素时间。...这将调整根元素大小,使其比目标元素高。再次,当上下滚动,目标元素可能位于根元素内部。...该div将被设置为粘性元素并充当容器。用于根据粘性状态设置样式和更改元素元素是class为sticky-contentdiv及其子元素。...这很容易做到,但是如果调整大小,不仅需要再次进行数学运算,还必须停止观察者并使用值重新启动它。将position属性设置为零,并使用内部元素以所需方式设置样式更加容易。...回调函数是我们感兴趣,甚至是一个简单设置:在if-else块中添加和删除事件监听器。事件回调函数仅更新输出中div。每当目标触发相交变化并且不与根相交,我们会将输出设置回零。

2.5K20

点击按钮,回到页面顶部5种写法

元素未滚动,scrollTop值为0,如果元素被垂直滚动了,scrollTop值大于0,且表示元素上方不可见内容像素宽度 由于scrollTop是可写,可以利用scrollTop来实现回到顶部功能...如果为true,表示元素顶部与当前区域可见部分顶部对齐(前提是当前区域可滚动);如果为false,表示元素底部与当前区域可见部分尾部对齐(前提是当前区域可滚动)。...如果没有提供该参数,默认为true,使用该方法原理与使用锚点原理类似,在页面最上方设置目标元素,当页面滚动,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果...则用图片代替) 使用CSS伪元素及伪类hover效果,当鼠标移动到该元素上,显示回到顶部文字,移出不显示   .box{ position:fixed; right:10px...id=“box” class=“box”> 【2】动画增强 为回到顶部增加动画效果,滚动条以一定速度回滚到顶部

2.4K30

前端-原生JS实现最简单图片懒加载

我先不设置 src,需要时候再设置? nice,就是这样。...alt 属性是一个必需属性,它规定在图像无法显示替代文本。 data-* 全局属性:构成一类名称为自定义数据属性属性,可以通过 HTMLElement.dataset来访问。...,也就是滚动滚动距离 通过 element.offsetTop获取元素相对于文档顶部距离 然后判断②-③<①是否成立,如果成立,元素就在可视区域内。...随着滚动向下滚动, bound.top会越来越小,也就是图片可视区域顶部距离越来越小,当 bound.top===clientHeight,图片上沿应该是位于可视区域下沿位置临界点,再滚动一点点...函数节流 在类似于滚动滚动等频繁DOM操作,总会提到“函数节流、函数去抖”。 所谓函数节流,也就是让一个函数不要执行太频繁,减少一些过快调用来节流。

5.1K30

造一个 react-infinite-scroller 轮子

图示: 不过,这里 “当前窗口顶部与很长元素顶部距离” 这一步并不能通过变量来获得,只能用 JS 来获取: // 元素顶部页面顶部距离 calculateTopPosition(el:...,滚动位置不应该还停留在 scrollY = 0 位置,不然会一直加载更多,比如此时滚动到了顶部: 3 <- 到顶部了,开始加载 2 1 0 加载更多 6 <- 不应该停留在这个位置,因为会再次触发无限滚动...这里两个监听器都可以设置 passive: true 来提高滚动性能,不过我们第一步是要检测当前浏览器是否支持被动监听器。...) 其中 calculateTopPosition 为递归地计算元素顶部浏览器窗口顶部距离 window 向上滚动:window.pageYOffset || doc.scrollTop 其中 doc...还有一点,在添加 listener 时候可以触发一次 listener 作为 initialLoad 向上滚动时候,在 componentDidUpdate 里要把滚动设置为上一次停留地方,否则滚动条会一直在顶部

2.5K30

聊聊苹果营销页中几个有趣交互动画

缩放图片 开始是一张全屏图片,在滚动过程中慢慢变成另一张图片,接着这张图片以屏幕正中间为基准点慢慢缩小,在缩小过程中,这张图是定在屏幕中央,缩小到一定值时候,图片随着滚动滚动。 ?...之后,元素将固定在顶部距离 0px 位置。...首先我们再加载完成可以得出,我们可以得出开始动画距离文档顶部滚动值 startOpen,因此我们可以得出如下代码: useEffect(() => { // 绑定事件 window.addEventListener...❞ 缩放图片 缩放图片屏幕这个动画我们可以用两个方式实现,一个是 「滚动视差」 实现,一个是 canvas 在滚动过程中实时渲染图片。 开始之前我们来看一下没有放大之前图,如下: ?...').height() / 2; 最小偏移距离,应该是在 curScale 为 scaleRadio ,包裹元素距离视口顶部距离,这个时候,我们就需要用到之前提到视屏图片电脑外壳 top =

1.9K60

「译」前端项目中常见 CSS 问题

当弹性项目数量不定时,不要使用 justify-content: space-between 对一个弹性容器应用 justify-content: space-between ,它会为元素分配空间,使它们互相之间距离相等...Sara Soueidan 写了一篇不错文章讨论过这个问题。 8. 当视窗高度不足将元素固定在屏幕顶部 如果你在视窗不够高时候将一个元素固定在屏幕顶部,会发生什么事呢?...为图片设置 max-width 添加图片时,定义 max-width: 100%,这样图片会在屏幕较小时候改变大小。否则浏览器将会显示水平滚动条。...使用 display: inline-block 奇怪空隙 给两个两个以上元素设置 display: inline-block 或者 display: inline ,将会导致它们之间产生一个微小空隙...一些图片必须在不裁剪或者不调整大小情况下显示,并且某些平台会强制用户以特定尺寸裁剪或上传图片。例如,Dribbble 规定上传缩略图尺寸为 800 x 600 像素。 18.

2.1K10
领券