iframe中position:fixed失效

最新推荐文章于 2022-12-15 16:58:53 发布
最新推荐文章于 2022-12-15 16:58:53 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： javaScript 文章标签： js iframe positionfixe
本文介绍了一种使导航栏随页面滚动而移动的JavaScript代码，并指出该方法会导致页面出现跳动现象。同时提供了一个移动端类似问题的解决方案链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

此段代码，确实可用，但是会产生跳动效果。等找到解决方案在更。
$(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
					
					2091
					
				

			

		

		

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

			
		

	



                

            
              



	

		

			

				
					
border-radius失效

				
			

			

				

					12-05
				

			

		

		

			
				
4. **绝对定位和浮动**：有时，元素的`position`属性被设置为`absolute`或`fixed`，或者使用了`float`，可能会影响`border-radius`的效果。尝试移除或调整这些属性，或者使用`z-index`和`relative`定位来解决问题。 ...

			
		

	



              


  
              

                


	

		

			

				
					
解决iframe中fixed失效的问题

				
			

			

				

					何建的博客
				

				

					05-29
					
					5315
					
				

			

		

		

			
				
1.开始先说几句废话，刚开始是因为公司有一个老项目需要添加一个底部的导航栏，这个导航栏需要一直悬挂在底部，刚开始以为很容易，结果接触那个项目的时候才知道那个项目是iframe里面嵌套iframe,非常恶心。结果就有了这个问题，好了废话不多少了，直接上代码，因为公司的项目代码太杂，所以我自己写了一个案例供大家参考。1.首先说一下案例效果，我会在a页面中嵌套b页面，让b页面中的导商条固定定位在a页面的...

			
		

	





	

		

			

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

				
			

			

				

					lyflyyvip的博客
				

				

					05-13
					
					3086
					
				

			

		

		

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

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


页面1（父页面）

<!DO...

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					weixin_30610755的博客
				

				

					09-30
					
					855
					
				

			

		

		

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

			
		

	





	

		

			

				
					
iframe子页面position的fixed

				
			

			

				

					香蕉猪的专栏
				

				

					12-03
					
					1万+
					
				

			

		

		

			
				
iframe子页面position的固定定位

			
		

	





	

		

			

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

				
			

			

				

					kylin_zdd的专栏
				

				

					09-19
					
					6707
					
				

			

		

		

			
				
bug现象

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



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

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

			
		

	





	

		

			

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

				
			

			

				

					12-27
				

			

		

		

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

			
		

	





	

		

			

				
					
iOS平台fixed定位修复与MintUI上拉加载实现

				
			

			

				

					
				

			

		

		

			
				
 在iOS系统中，由于Safari的渲染机制和`fixed`元素的特性，当页面滚动时，`fixed`元素可能会出现抖动或是失效的情况。这通常是因为`fixed`元素依赖于视口（viewport）的相对定位，而当页面发生滚动时，如果视口发生...

			
		

	





	

		

			

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

				
			

			

				

					codeRainbow的博客
				

				

					12-15
					
					658
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					gwpJava的专栏
				

				

					11-14
					
					4808
					
				

			

		

		

			
				
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

			
		

	





	

		

			

				
					
解决iframe中fixed失效问题

				
			

			

				

					灵云山的博客
				

				

					11-02
					
					5930
					
				

			

		

		

			
				
代码如下：
aa.html






function say() {
	var box = ""
	$("body").append(box);
}
//调用bb页面中的创建button方法
function callChild(){
	myFrame.window.say();
}




	
	
	

 
bb.html


function say(){$("body").ap

			
		

	





	

		

			

				
					
position: fixed用在iframe里面失效了

				
			

			

				

					weixin_33872660的博客
				

				

					08-25
					
					563
					
				

			

		

		

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

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

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

			
		

	





	

		

			

				
					
position fixed 固定定位失效问题及解决方案

					
热门推荐

				
			

			

				

					cjFrontEnd的博客
				

				

					05-20
					
					1万+
					
				

			

		

		

			
				
最近在项目开发过程中遇到了一个固定定位失效的问题，当给一个元素设置了position： fixed并设置了距离top和left的距离之后发现位置居然一直不正确，fix固定定位失效了。

由于出现这个bug的地方使用了better-scroll， 初步猜想失效的原因可能是使用的better-scroll.js插件， 后来在网上查找了一番，发现原来使用isscroll.js滚动库以及在移动端设置-we...

			
		

	





	

		

			

				
					
解决iframe下跨域，iphone上position:fixed失效问题

				
			

			

				

					gaoqiang1112的博客
				

				

					04-13
					
					3569
					
				

			

		

		

			
				
=============================================2019-3-6 补充========================================

对应ios iframe 中fixed 楼主现在已经 很轻车熟路了 这里 再补充一下 宏观思路

把 iframe嵌入的页面

首先 1.想象成一个 宽高100%的 div 然后 用相对定位 ...

			
		

	





	

		

			

				
					
iframe设置position: fixed;设置高度高度在ipad air2不生效

				
			

			

				

					05-25
				

			

		

		

			
				
你可以尝试使用 JavaScript 在加载页面时获取设备的屏幕高度，然后将 iframe 的高度设置为屏幕高度。例如：  ```javascript var iframe = document.getElementById('your-iframe-id'); iframe.style.height = window...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值