如何在dom节点上使用fixed定位？实现基于父节点而不是浏览器的滚动定位？一眼看懂，简单明了。

news2024/12/23 3:09:10

文章目录

- 一、想要实现的功能场景
- 二、父相子绝方式实现dom节点内元素滚动定位
- - 2.1、父相子绝代码
  - 2.2、实现效果
- 三、iframe中使用fixed方式实现
- - 3.1、fixed代码
  - 3.2、实现效果
- 四、总结

一、想要实现的功能场景

想在一个node节点中实现滚动，但是我的文本要基于这个元素在滚动的时候浮起，类似于如下的功能
在这里插入图片描述
那么我们首先想到的必然是fixed固定定位，但是我们不得不考虑的一个问题就是，fixed是基于窗口来进行定位，无法做到类似于父相子绝的定位方式，因为fixed定位的就不是父dom节点，所以我们暂时先不用去考虑使用fixed方式定位。

二、父相子绝方式实现dom节点内元素滚动定位

其实我们如果不考虑使用fixed方式去实现dom内元素的滚动定位的话，其实还是很好实现这个功能的，只是走进了一个误区，有没有什么好的css属性可以实现此功能，然后不自觉的就钻进了牛角尖。
实现步骤：

1、给需要滚动的元素包裹一个父元素，然后定义为指定的宽高
2、层级为 <父><滚动元素></滚动元素><Fixed元素></Fixed元素></父>
3、采用父相子绝的方式将Fixed元素进行浮起，然后定位，给滚动元素设置滚动互不干扰，功能实现

2.1、父相子绝代码

  <!-- 父相子绝方式，构建一个新的父元素，父元素高度为本身的滚动元素高度，并且设置相对定位 -->
  <div style='position:relative;height:300px;'>
    <!-- 本身需要固定的父元素，现在为滚动元素，原有高度为300px,调整为100%高度；并设定overflow滚动 -->
    <div style="height:100%;overflow:auto;">
      <!-- 内容 -->
      <div style="height:800px;background:green;">我是测试数据</div>
    </div>
    <!-- fixed元素设定absolute，高度是基于爷爷元素定位，所以滚动元素其实影响不到当前元素的定位 -->
    <div style='position:absolute;width: 100%;bottom:50px;height: 20px;background:red;'>需要fixed的文本内容</div>
  </div>

2.2、实现效果

在这里插入图片描述

三、iframe中使用fixed方式实现

就像标题说的，如果我就是想用fixed的方式实现此功能，那么就用iframe标签去加载这个dom节点，这个dom节点也就被分割为了一个窗口，fixed是基于窗口，那么我们就可以直接使用fixed定位实现子元素的定位

3.1、fixed代码

  <!-- 采用iframe方式，然后去设定高度等，直接子元素设定fixed既是根据iframe进行定位，而不是根据窗口定位 -->
  <iframe style='height:300px;padding: 0;margin-top: 200px;' src="./iframe.html" frameborder="0">
  </iframe>

  <!--iframe.html-->
  <!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>
	    * {
	      margin: 0;
	      padding: 0;
	    }
	  </style>
	</head>
	
	<body>
	  <div style='overflow:auto;height:300px;background:blue;'>
	    <div style='position:fixed;top:0;background-color: pink;width: 100%;height: 20px;'>ceshi</div>
	    <div style='height:800px;margin-top:20px;'>可是我偏偏就是不想要转弯</div>
	  </div>
	</body>
	
	</html>