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

news2024/11/22 4:56:46

文章目录

    • 一、想要实现的功能场景
    • 二、父相子绝方式实现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>

3.2、实现效果

在这里插入图片描述
iframe如何在vue中使用,可以参考下面两篇文章

vue使用iframe方式
iframe通信方式

四、总结

其实另外一种实现方式,我们也可以用js去计算节点被卷去的高度,滚动的时候不停的位移,然后将top进行一个变更,但是此种方法就没有必要了,包括第二种iframe嵌套的方式,其实如果就是想因为一个dom元素使用fixed去构建一个iframe窗口的话是没有必要的,所以我们还是推荐使用第一种方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/342124.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云计算关键技术

在云计算数据中心的构建过程中&#xff0c;离不开一些关键的技术&#xff0c;比如&#xff0c;虚拟化技术&#xff0c;分布式数据存储技术&#xff0c;云计算平台管理软件以及其它诸如HBase&#xff0c;Hadoop等相关技术。目录 虚拟化技术 计算虚拟化技术-KVM 分布式数据存储技…

基于 YAML 接口自动化测试框架设计

在设计自动化测试框架的时候&#xff0c;我们会经常将测试数据保存在外部的文件&#xff08;如Excel、YAML、CSV&#xff09;&#xff0c;或者数据库中&#xff0c;实现脚本与数据解耦&#xff0c;方便后期维护。目前非常多的自动化测试框架采用通过Excel或者YAML文件直接编写测…

Allegro如何设置自动保存和自动保存的时间操作指导

Allegro如何设置自动保存和自动保存的时间操作指导 做PCB设计的时候,自动保存软件是一个必要的功能,Allegro同样支持设置自动保存,而且可以设置自动保存的时间。 如下图 具体操作如下 点击Setup点击User Preferences

都说高速信号过孔尽量少,高速先生却说有时候多点反而好?

作者&#xff1a;一博科技高速先生成员 黄刚过孔在高速领域可谓让硬件工程师&#xff0c;PCB设计工程师甚至仿真工程师都闻风丧胆&#xff0c;首先是因为它的阻抗没法像传输线一样&#xff0c;通过一些阻抗计算软件来得到&#xff0c;一般来说只能通过3D仿真来确定&#xff0c;…

二叉树的性质与推导及常见习题整理

目录 一、性质推导 二、常见的二叉树性质习题 1. 某二叉树共有 399 个结点&#xff0c;其中有 199 个度为 2 的结点&#xff0c;则该二叉树中的叶子结点数为&#xff08;&#xff09;。 2.在具有 2n 个结点的完全二叉树中&#xff0c;叶子结点个数为&#xff08;&#xff…

字母板上的路径[提取公共代码,提高复用率]

提取公共代码前言一、字母版上的路径二、贪心1、idea2、go3、代码不断拆分复用的过程总结参考文献前言 写代码&#xff0c;在提高效率的同时&#xff0c;要方便人看&#xff0c;这个人包括自己。大函数要拆分成一些小函数&#xff0c;让每个函数的宏观目的和步骤都显得清晰&am…

分享微信点餐小程序搭建步骤_微信点餐功能怎么做

线下餐饮实体店都开始摸索发展网上订餐服务。最多人选择的是入驻外卖平台&#xff0c;但抽成高&#xff0c;推广还要另买流量等问题&#xff0c;也让不少商家入不敷出。在这种情况下&#xff0c;建立自己的微信订餐小程序&#xff0c;做自己的私域流量是另一种捷径。那么&#…

分类模型评估:混淆矩阵、准确率、召回率、ROC

1. 混淆矩阵 在二分类问题中&#xff0c;混淆矩阵被用来度量模型的准确率。因为在二分类问题中单一样本的预测结果只有Yes or No&#xff0c;即&#xff1a;真或者假两种结果&#xff0c;所以全体样本的经二分类模型处理后&#xff0c;处理结果不外乎四种情况&#xff0c;每种…

反应-扩散方程(Reaction-diffusion system)

文章目录单组分反应-扩散方程双组分反应-扩散方程三组分和更多组分的反应-扩散方程Fishers equationKPP方程Belousov–Zhabotinsky reaction历史化学机理变体Noise-induced order数学背景Briggs–Rauscher reactionZFK equation行波解渐近解外部区域内部区域KPP-ZFK 转变Clavin…

13-PHP使用过的函数 121-130

121、bindColumn 将字段绑定到变量上 // while,foreach,list()进行结果数组的解构&#xff0c;解构到变量中; //!要在预处理对象上调用bindColumn函数 $stmt->bindColumn(id,$id); $stmt->bindColumn(name,$name); $stmt->bindColumn(sex,$sex); $stmt->bindColumn…

flink solt概念详解

ask是flink中的一个逻辑概念&#xff0c;一个任务由一个或者多个算子组合而成(多个算子构成一个任务是需要满足一定的条件才可以&#xff0c;有兴趣的老铁可以来了解一下 Operator Chain),为了提升任务执行的效率&#xff0c;可以对任务配置并行度&#xff0c;使任务在实际运行…

【服务器数据恢复】FreeNAS层UFS2文件系统数据恢复案例

服务器数据恢复环境&#xff1a; Dell存储服务器&#xff0c;采用esxi虚拟化系统&#xff0c;esxi虚拟化系统里有3台虚拟机&#xff1b;上层iSCSI使用FreeNAS构建&#xff0c;通过iSCSI方式实现FCSAN功能&#xff1b;FreeNAS层采用UFS2文件系统。 esxi虚拟化系统里有3台虚拟机中…

python中使用numpy包的向量矩阵相乘

一直对np的线性运算不太清晰&#xff0c;正好上课讲到了&#xff0c;做一个笔记整个理解一下 1.向量和矩阵 在numpy中&#xff0c;一重方括号表示的是向量vector&#xff0c;vector没有行列的概念。二重方括号表示矩阵matrix&#xff0c;有行列。 代码显示如下&#xff1a; …

VMware 复制已有的虚拟机并修改IP地址

第一步&#xff1a;关闭当前机器第二步&#xff1a;在VMware中右键要克隆的机器 选择管理-->克隆第三步&#xff1a;启动新克隆的虚拟机 修改主机名 如 hostname slave2第四步&#xff1a;修改克隆的虚拟机的ip地址和mac地址&#xff08;注意&#xff1a;由于slave2是克隆出…

直流电机驱动模块开发,为电子设备提供动力之源

直流电机分为有刷直流电机和无刷直流电机两种&#xff0c;有刷直流电机连接上直流电就能转动&#xff0c;但是想要做到精准的转速和方向控制离不开电机驱动模块&#xff1b;无刷直流电机则必须要有驱动才能转动&#xff0c;直流电机驱动模块能够充分利用和有效发挥电源的能量功…

MQTT X 1.9.1 发布:资源消耗降低 80%,稳定性大幅提升

经过两个 Beta 版本迭代&#xff0c;近日&#xff0c;MQTT 5.0 客户端工具 MQTT X 正式发布了 1.9.1 稳定版本。 该版本通过大规模性能优化以及已知问题修复实现了稳定性的飞跃提升。特别是在性能方面&#xff0c;以接收大量消息场景为例&#xff0c;v1.9.1 相比于上一版本&am…

【数据结构与算法】单调队列 | 单调栈

&#x1f320;作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《数据结构与算法要啸着学》 &#x1f387;座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;…

【Python入门第七天】Python 数字

Python 数字 Python 中有三种数字类型&#xff1a; intfloatcomplex 为变量赋值时&#xff0c;将创建数值类型的变量&#xff1a; 实例 x 10 # int y 6.3 # float z 2j # complex如需验证 Python 中任何对象的类型&#xff0c;请使用 type() 函数&#xff1a; 实…

计算机图形学:中点Bresenham算法画椭圆

作者&#xff1a;非妃是公主 专栏&#xff1a;《计算机图形学》 博客地址&#xff1a;https://blog.csdn.net/myf_666 个性签&#xff1a;顺境不惰&#xff0c;逆境不馁&#xff0c;以心制境&#xff0c;万事可成。——曾国藩 文章目录专栏推荐专栏系列文章序一、实现思路二、…

分布式-分布式事务和分布式锁

分布式事务有哪些解决方案 分布式事务 指事务的参与者、支持事务操作的服务器、存储等资源分别位于分布式系统的不同节点之上。 分布式事务就是一个业务操作&#xff0c;是由多个细分操作完成的&#xff0c;而这些细分操作又分布在不同的服务器上&#xff1b;事务&#xff0c…