iframe中position:fixed失效

最新推荐文章于 2022-12-15 16:58:53 发布
转载 最新推荐文章于 2022-12-15 16:58:53 发布 · 1.9k 阅读 · 1
文章标签：

#js #iframe positionfixe

本文介绍了一种使导航栏随页面滚动而移动的JavaScript代码，并指出该方法会导致页面出现跳动现象。同时提供了一个移动端类似问题的解决方案链接。 
此段代码，确实可用，但是会产生跳动效果。等找到解决方案在更。
$(document).ready(function () {
    $(parent.window).scroll(function () {
        $("#Page-nav").css({
            top: $(parent.window).scrollTop() + 200
        });
    });
}







同时还有一篇移动端的此类问题，传送门在此。


http://blog.youkuaiyun.com/gy127132060/article/details/50161947




                

        

    

    
  



    



                



	

		

			

				
					
h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰

				
			

			

				

					weixin_39647499的博客
				

				

					12-19
					
					2117
					
				

			

		

		

			
				
做H5开发，安卓和IOS的兼容问题经常会困扰我们，尤其是跟第三方平台合作，用到iframe嵌入式应用，令很多Web前端开发的童鞋脑壳疼，相信大家也入了不少坑，且踩且珍惜吧，呵呵^_^。今天抽时间整理一些出来，希望能帮助到大家。iframe自动变宽了，在IOS手机上出现滚动条第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。第二步：设置iframe的样式为...

			
		

	



                

            
              



	

		

			

				
					
解决iframe中fixed失效的问题

				
			

			

				

					05-31
				

			

		

		

			
				
这是一个解决fixed在iframe中失效的解决案例，只要把文件放到编辑器中打开即可看到效果

			
		

	



              


  
              

                


	

		

			

				
					
iframe跨域position fixed失效超简单解决方案

				
			

			

				

					lyflyyvip的博客
				

				

					05-13
					
					3101
					
				

			

		

		

			
				
如果有朋友使用跨域iframe的时候遇到了这个问题，那么欢迎你试一下这个办法，我再全网都没搜到非常完善的解决方案，有个兄弟的帖子帮了我很大的忙，但是我解决了问题的时候却找不到他的帖子了，实在抱歉
首先声明一下场景

一个html页面，作为父页面，拥有iframe标签，iframe的src地址为【2】
一个html页面，作为子页面
两个html页面位于不同域下


页面1（父页面）

<!DO...

			
		

	





	

		

			

				
					
关于iframe中使用fixed定位的一些问题

				
			

			

				

					weixin_30610755的博客
				

				

					09-30
					
					861
					
				

			

		

		

			
				
先来看看position: fixed；的定义：生成绝对定位的元素，相对于浏览器窗口进行定位；
但是在iframe中使用fixed定位，实际上是相对于iframe窗口进行定位，原因在于iframe类似于创建了一个浏览器窗口，在使用一些获取鼠标位置以及元素位置等方法的时候把iframe当作浏览器窗口来处理就行。
以下是一些在iframe中使用fixed需要考虑的常用js事件对象属性与方法:
获...

			
		

	



		

			
		



	

		

			

				
					
iframe包含的position:fixed无效的原因

				
			

			

				

					gwpJava的专栏
				

				

					11-14
					
					4815
					
				

			

		

		

			
				
aa.html中含有iframe标签 iframe的src指向bb.html 在bb.html中 有个div的position的值为fixed 此时如果通过直接打开aa.html 则那个含有position:fixed的div无法随着滚动条的滚动而滚动 如果直接打开bb.html 则该div可以随着滚动条的滚动而滚动 其原因是因为直接打开aa.html的话 拥有position:fixed的div

			
		

	





	

		

			

				
					
ios解决fixed定位失效并mintui的loadmore上拉加载

				
			

			

				

					12-27
				

			

		

		

			
				
在iOS设备上，由于Safari浏览器的特殊渲染机制，经常会出现`fixed`定位失效的问题，尤其是在使用`Vue.js`框架构建的web应用中。这个问题主要表现为`fixed`元素不再固定于屏幕某个位置，而是随页面滚动而移动。针对这...

			
		

	





	

		

			

				
					
iframe fixed不生效

					
最新发布

				
			

			

				

					07-26
				

			

		

		

			
				
在某些浏览器环境中，特别是在 iOS 的微信内置浏览器中，`iframe` 内部的 `position: fixed` 定位可能会失效，导致固定定位的元素无法正确显示在预期位置。这种现象的原因主要与浏览器如何处理 `iframe` 的视口和...

			
		

	





	

		

			

				
					
      </div>
如上所示vue代码，我要在class="gradient-rectangle" 下面也就是与class="vertical-button-bar"同一级别的在整个页面的右下角加一个指南针功能，指南针代码可以借鉴：<template>
  <div id="cesium-container" class="cesium-container">
    <!-- 修改后的指南针按钮 -->
    <button class="compass-button" @click="resetNorth">
      <img 
        src="/image/zhinanzhen.png" 
        alt="指南针" 
        style="width: 30px; height: 30px;" 
      />
    </button>
  </div>
</template>


<script>
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import CircleRippleMaterialProperty from './CircleRippleMaterialProperty';

export default {
  name: 'CesiumRippleEffect',
  data() {
    return {
      viewer: null,
      rippleEntity: null
    };
  },
  mounted() {
    this.initCesium();
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy();
      // 完全移除Cesium实例
      const cesiumContainer = document.getElementById('cesium-container');
      if (cesiumContainer) {
        cesiumContainer.innerHTML = '';
      }
    }
  },
  methods: {
    initCesium() {
      // 修复沙箱错误：禁用InfoBox
      Cesium.InfoBoxViewModel.prototype._iframeHtml = '<div></div>';
      
      // 初始化Cesium Viewer
      this.viewer = new Cesium.Viewer('cesium-container', {
        animation: false,
        timeline: false,
        baseLayerPicker: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        fullscreenButton: true,
        infoBox: false // 完全禁用InfoBox组件
      });

      // 添加波纹圆效果
      this.addRippleEffect();
      
      // 调整相机位置
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(113.194006, 27.399411, 2000),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-60),
          roll: 0
        },
        duration: 2.0
      });
    },
    
    addRippleEffect() {
      // 指定坐标 (113.194006, 27.399411)
      const position = Cesium.Cartesian3.fromDegrees(113.194006, 27.399411);
      
      // 创建波纹圆实体
      this.rippleEntity = this.viewer.entities.add({
        name: '动态波纹圆',
        position: position,
        ellipse: {
          semiMinorAxis: 500.0,
          semiMajorAxis: 700.0,
          height: 0,
          material: new CircleRippleMaterialProperty({
            color: Cesium.Color.fromCssColorString("#00FFFF").withAlpha(0.6),
            speed: 1,
            count: 1,
            gradient: 0.1
          })
        }
      });
      
      // 添加参考点
      this.viewer.entities.add({
        position: position,
        point: {
          pixelSize: 10,
          color: Cesium.Color.RED
        }
      });
    },
    
    // 指南针功能：重置北方向
    resetNorth() {
      if (!this.viewer) return;
      
      // 获取当前相机位置
      const camera = this.viewer.camera;
      const currentPosition = camera.position.clone();
      
      // 创建新的方向，将heading(偏航角)设为0（正北方向）
      const orientation = {
        heading: 0, // 北方向
        pitch: camera.pitch,
        roll: camera.roll
      };
      
      // 平滑过渡到北方向
      camera.flyTo({
        destination: currentPosition,
        orientation: orientation,
        duration: 1.0,
        easingFunction: Cesium.EasingFunction.CUBIC_OUT
      });
    }
  }
};
</script>

<style scoped>
.cesium-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
}

/* 指南针按钮样式 - 确保可见 */
.compass-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000; /* 确保在Cesium控件之上 */
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9); /* 提高背景不透明度 */
  border: 1px solid #ddd;
  border-radius: 50%; /* 圆形按钮 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 更明显的阴影 */
  transition: all 0.3s ease;
}

.compass-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.compass-button svg {
  color: #1a73e8; /* 更明显的颜色 */
  width: 24px;
  height: 24px;
}
</style>
   基于此修改代码，然后原先vue中的其他无关代码不要动

				
			

			

				

					07-07
				

			

		

		

			
				
 将按钮的样式中的`position: absolute`改为`position: fixed`。   但是，原按钮的样式是scoped，所以我们需要修改样式部分。   另外，原按钮的z-index设置较高（1000），应该不会被遮挡。   修改后的代码：   注意...

			
		

	





	

		

			

				
					
iframe子页面position的fixed

				
			

			

				

					weixin_34302798的博客
				

				

					05-02
					
					483
					
				

			

		

		

			
				
前言：
首先说一说我昨天天的苦逼经历。中午吃饭时一同事跟我说，他做的项目嵌套iframe后，子页面的position设置fixed失效了。
经过反复询问，得知他用了两层iframe，再加上最外的父页面，一共就是三层。
下午就其iframe子页面固定定位问题进行处理，上网找了各种解决方案：插件、js模拟等效果均不理想。页面不是代码过多就是效果卡顿、跳动（附：博主的同事架构的页面是用于手机微信端...

			
		

	





	

		

			

				
					
ios下，iframe页面中的position:fixed定位布局错误

				
			

			

				

					kylin_zdd的专栏
				

				

					09-19
					
					6762
					
				

			

		

		

			
				
bug现象

开发微信公众账号，需要使用iframe展示一个页面，点击这个页面中的按钮时，会弹出一个对话框，对话框使用fixed定位，关键布局信息如下所示：



div.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100;
z-index: 100;
}

在网页上、Android版微信中都没问题，但是iOS中，该

			
		

	





	

		

			

				
					
position: fixed用在iframe里面失效了

				
			

			

				

					weixin_33872660的博客
				

				

					08-25
					
					572
					
				

			

		

		

			
				
iframe真是各种坑啊，，，可是找不到别的代替

$(parent.window).scroll(function(){
  $('固定元素').css({
    top : $(parent.window).scrollTop();
  });
});

这样是滚动鼠标滚轮使固定元素滚动到页面顶部，再给它设置margin让它放在心仪位置，哈哈，我只能这么干了，再设置刚进入页面...

			
		

	





	

		

			

				
					
iOS 下，iframe 页面中的 position:fixed 定位无效的解决办法

				
			

			

				

					codeRainbow的博客
				

				

					12-15
					
					674
					
				

			

		

		

			
				
iOS 下，iframe 页面中的 position:fixed 定位无效的解决办法

			
		

	





	

		

			

				
					
iframe中positioin:fixed失效问题

				
			

			

				

					weixin_30674525的博客
				

				

					12-20
					
					687
					
				

			

		

		

			
				
页面中嵌套的iframe 内的position：fixed元素定位失效fixed正常页面此时position:fixed是根据浏览器窗口定位的，下拉一直位于左上角；以iframe形式嵌入后此时position:fixed是根据iframe窗口定位的，下拉fixed元素消失；这种问题应该用什么思路解决呢
当时做的是在iframe页面中点击分享图片，弹窗二维码的功能，要让二维码图片相对于外部w...

			
		

	





	

		

			

				
					
关于iframe页面嵌入后在ios设备上position=fixed属性失效的解决办法

				
			

			

				

					MarkAsh的专栏
				

				

					09-22
					
					8575
					
				

			

		

		

			
				
项目中有个需求时在页面的最下面有一排按钮，这排按钮需要固定到页面的最下面，不能随着屏幕的滚动为滚动。


问题：
功能是使用css的position:fixed; bottom:0;属性设置的。
单独一个页面访问，不管在PC上还是移动设备上都可以正常显示。
But

			
		

	





	

		

			

				
					
position:fixed失效的问题

					
热门推荐

				
			

			

				

					过宁妍的专栏
				

				

					08-18
					
					1万+
					
				

			

		

		

			
				
这几天做了一个手机端的demo（滑动推屏的那种），在底部放了一个div，position:fixed，bottom：0.
为了让动画性能更加，在body上加上了transform：translate3d(0,0,0),然后又调了一个js文件，这下问题来了，本来应该悬浮在底部的div不见了！！！推到底，发现出现在了最后一页的底部。。。
难道是position:fixed失效了？？？
查了资料发

			
		

	





	

		

			

				
					
【解决】Android 2.x 不支持overflow、position:fixed解决方案

				
			

			

				

					kaosini的专栏
				

				

					07-02
					
					2639
					
				

			

		

		

			
				
Android 2.x和IOS5以下都不支持overflow:auto属性（position:fixed也不支持）。

移动端浏览器兼容性和PC端相比，有过之而无不及。操作系统版本及各式浏览器和各式的屏幕大小排列组合，你永远也无法预测到你的应用会在哪部手机上冒出什么样的问题。
测试过各种浏览器（chrome手机浏览器、百度手机浏览器、手机QQ浏览器、UC浏览器、UC浏览器HD、safari浏

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值