简单实现元素滚动吸顶功能

最新推荐文章于 2024-03-26 11:08:17 发布
最新推荐文章于 2024-03-26 11:08:17 发布
阅读量319 收藏 1
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49533977/article/details/125789045
版权

简单实现元素滚动吸顶功能

	实现原理：通过获取需要吸顶元素的距离顶部的高度，通过监听页面滚动事件来获取当前滚动距离，当滚动距离大于元素距离顶部高度的时候给元素添加相应的类名，进行固定定位。

	<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      text-align: center;
      color: #fff;
      padding: 10px 0;
      margin-bottom: 10px;
      background-color: #00f;
    }

    .box_1 {
      width: 100%;
      text-align: center;
      color: #fff;
      padding: 10px 0;
      margin-bottom: 10px;
      background-color: #0f0;
    }

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box_1">10</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>
  <div class="box">8</div>

</body>
<script>
	//获取需要吸顶的元素
  let selectDom = document.querySelector('.box_1');
  let realTop = selectDom.offsetTop;//吸顶元素距离顶部的高度
  realTop += selectDom.offsetParent.offsetTop;
  //监听滚动事件
  window.onscroll = (v) => {
  	//获取当前滚动距离
    let absTop = document.documentElement.scrollTop
    console.log(absTop, realTop);
    //判断当前滚动距离大于吸顶元素到顶部的高度时，就给吸顶元素添加类名，反之去除类名
    if (absTop > realTop) {
      selectDom.classList.add("fixed")
    } else {
      selectDom.classList.remove("fixed")
    }
  }
</script>
</html>

	如果元素为动态获取，要先将等元素加载完成后再获取元素高度，或者设置一个定时器延时获取高度。
良__
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
滚动吸顶效果--四种方式实现
weixin_34246551的博客
06-18 4217
滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。offsetTop用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。定位父级 offsetParent 的定义是：与当前元素最近的 position != static 的父级元素。或许写这个代码的人没有注意到“...
Html5之title吸顶功能
09-27
实现吸顶功能的基本原理是通过JavaScript检测页面滚动的位置（scrollTop）和标题元素相对于页面顶部的距离（offsetTop）。当用户向下滚动且scrollTop大于offsetTop时，设置标题元素的CSS position属性为fixed，并将...
css实现元素吸顶效果
qq_34528147的博客
11-01 856
今天有个要做吸顶效果的需求，由于页面比较复杂，我在那猛写各种监听，准备用fixed实现，突然搜到了，非常好用，记录一下。 是 CSS 中的一种定位属性，它使元素在页面滚动时可以相对于视口或某个父元素保持固定位置。这意味着元素会在页面滚动到特定位置时停止滚动，并保持在那个位置，直到页面继续滚动到它的上下文范围之外。要使用 ，需要定义以下三个属性：以下是一个基本的示例： 注意事项 设置了position:sticky的元素的效果完全受制于父级元素，因为他不会脱离文档流。https://blog.csdn.ne
元素滚动吸顶效果
单飞吧的博客
02-27 124
position: sticky 粘性定位的元素是依赖于用户的滚动. 它的行为就像 position:relative， 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 // 粘性定位的元素 <view class="sticky"></view> // 添加 css 样式 .sticky { position: sticky; top: 0; left: 0; right: 0; z-index: 500; } ...
如何在Vue项目中实现吸顶元素
Carol的小星球
12-26 2598
我的思路就是判断合适的时候将这个元素的position设为fixed，那么这个合适的时机如何判断呢？我们可以计算页面滚动的距离。 监听页面滚动状态 在mounted回调中加入以下代码： mounted() { // handleScroll为页面滚动的监听回调 window.addEventListener('scroll', this.handleScroll); }, 在destr...
【css3技巧(四)】滚动吸顶。
前端技术栈
12-19 772
css技巧一、滚动吸顶 一、滚动吸顶 非常简单的一个css3属性，注意兼容性:positon:sticky. position: -webkit-sticky; position: sticky; top: 0; z-index: 99;
js实现导航吸顶效果
11-30
本示例通过JavaScript实现了一个简单的导航吸顶效果，下面将详细讲解实现这一功能的关键步骤和涉及的技术点。 首先，我们需要了解HTML结构。在提供的代码中，可以看到一个`<ul>`元素被赋予了类名`.title`，这是导航...
实现一个 Vue 吸顶锚点组件方法
01-19
前言 近期产品小哥哥给我提了一个新需求，在一个页面的滚动区中添加一组锚点定位按钮，...要做一个吸顶效果最简单的方式是将 css 的 position 属性设置为 sticky， 这样就实现粘性布局。 .sticky-container { positio
JS模拟实现瀑布流 吸顶栏
06-02
通过这个简单的模拟实现，学生可以了解瀑布流布局的基本原理，包括元素的动态加载和布局调整，以及吸顶栏的实现方法。然而，实际项目中可能还需要考虑到更多细节，例如响应式设计、不同设备的适配、动画效果等，这些...
flutter 实现多布局列表的示例代码
03-17
对于更复杂的需求，如需要头部固定、可滚动吸顶效果等，可以使用`CustomScrollView`结合`Sliver`组件。`Sliver`组件允许你创建更灵活的列表布局，例如`SliverAppBar`、`SliverGrid`和`SliverList`。 ```dart class ...
滑动滚动吸顶式导航栏
10-10
随着鼠标滚动，导航栏逐渐被遮住，当继续滚动鼠标时，导航栏出现并一直吸顶。再次鼠标上划时，导航栏又恢复原样。
导航滚动一定高度吸顶，锚点定位
12-05
网络上发现的案例。觉得不错就复制下来了。以便于自己改造！
滚动页面，实现导航栏固定在顶部（吸顶效果）
热门推荐
Kris的博客
01-02 4万+
首先最简单的，是利用position的sticky属性 说明 sticky 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。 它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：0)；position:sticky这时的效果相当于fixed定位，固定在(top: 0...
vue hover事件_基于 Vue 的两层吸顶踩坑总结
weixin_39957318的博客
12-12 279
前言近日，在做活动页的过程中遇到两层吸顶的需求，并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸顶嘛，应该不难吧，事实证明还是踩了很多坑才出来。兼容性问题多到吐血，我太难了。废话不多说，先看一下两层吸顶的最终实现效果，如下图所示。功能点：两层吸顶，因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层吸顶刚吸顶的位置，这个功能点和锚点有些类似。二层 Tabs 通过 hove...
[js] 滚动吸顶简易版
qq_14993591的博客
09-09 154
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
position: sticky；页面滚动实现吸顶效果
weixin_45634433的博客
07-14 571
滚动页面到某一个元素的位置的时候,改元素实现吸顶效果 在项目中使用如图的标题吸顶效果很常见,这里实现一个属性就可以解决的方案. 只要在需要实现吸顶效果的元素的上添加position: sticky; 属性,就可以实现相应的效果 ...
Vue 某区域滚动至顶部 实现吸顶效果(固定定位) / 回到顶部
最新发布
YaRuu的博客
03-26 1568
要求蓝色框内模块滑动到头部，左侧列表固定，右侧内容块继续滚动 实现 回到顶部功能 也是可以用window.addEventListener() 使用window方法 监听滚动事件：window.addEventListener() 参数1：事件类型（click、mousedown、scroll) 参数2：事件触发后调用函数 参数3：冒泡或捕获（布尔类型）
js基础编程-题目24 滚动吸顶
喜大普奔
11-18 149
整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦 滚顶吸顶 滚动吸顶有几种方式？ 1. 使用原生的 offsetTop 实现 2. 使用 JQuery 的 offset().top 实现 3. 使用 position:sticky 实现 4. 使用 obj.getBoundingClientRect().top 实现 效果：滚动吸顶效果视频链接 这里详细说一下用 原生js实现 原生js实现 html部分 <nav> <h1>导航</
vue 滚动 吸顶效果
小妹的博客
06-03 775
vue吸顶效果
vue 监听页面滚动 实现元素吸顶或者固定位置
09-07
在Vue中实现元素吸顶或固定位置的方式是通过监听页面滚动事件并动态改变元素的样式或位置。具体步骤如下： 1. 在Vue的组件中，通过`mounted`钩子函数监听页面滚动事件： ``` mounted() { window.addEventListener('scroll', this.handleScroll); } ``` 2. 在`methods`中定义`handleScroll`方法来处理滚动事件，并使用`scrollTop`属性获取页面滚动位置： ``` methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来决定元素的样式或位置 // ... } } ``` 3. 在模板中，使用动态绑定的方式来设置元素的样式或位置。可以通过绑定CSS类名或行内样式实现，以下是两种常见的实现示例： - 使用CSS类名： 在data中定义一个`isFixed`变量，根据滚动位置的条件来切换`isFixed`的值，在模板中绑定CSS类名根据`isFixed`的值设置元素的样式： ``` data() { return { isFixed: false, }; }, methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来判断是否满足条件，如果满足条件则设置isFixed为true，否则为false this.isFixed = scrollTop > 100; }, }, ``` 在模板中绑定CSS类名，并设置元素的样式： ``` <div :class="{ 'fixed': isFixed }">固定的元素</div> <style> .fixed { position: fixed; top: 0; left: 0; } </style> ``` - 使用行内样式： 直接通过绑定`style`属性来设置元素的样式： ``` data() { return { topPosition: 0, }; }, methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来判断是否满足条件，如果满足条件则设置topPosition为固定的位置，否则为0 this.topPosition = scrollTop > 100 ? '100px' : '0'; }, }, ``` 在模板中绑定行内样式： ``` <div :style="{ top: topPosition }">固定的元素</div> ``` 通过以上步骤就可以实现元素吸顶或固定位置的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值