iframe中positioin:fixed失效问题

摘要:
页面的嵌套iframe中的position:fixed元素无法定位固定的普通页面。此时,位置:fixed根据浏览器窗口定位,下拉列表始终位于左上角;在iframe表单中嵌入后,位置:fixed根据iframe窗口定位,下拉固定元素消失;应该用什么想法来解决这个问题?当时,我们所做的是单击iframe页面上的共享图像并弹出二维码功能,这样二维码图像相对于外部窗口是固定的。

页面中嵌套的iframe 内的 position:fixed元素定位失效
fixed正常页面 此时position:fixed是根据浏览器窗口定位的,下拉一直位于左上角;
iframe形式嵌入后 此时position:fixed是根据iframe窗口定位的,下拉fixed元素消失;
这种问题应该用什么思路解决呢

当时做的是在iframe页面中点击分享图片,弹窗二维码的功能,要让二维码图片相对于外部window窗口固定定位。

 iframe中positioin:fixed失效问题第1张

 

$(".share a").click(function(){//点击分享链接后,让外部window窗口滚动1px,触发scroll事件;

var currTop=$(parent.window).scrollTop();

$(parent.window).scrollTop(currTop+1);

});

$(parent.window).scroll(function(){//外部窗口滚动时,把需要固定元素的top值跟随改变;

   $('#jiathis_weixin_modal').css({

     top : $(parent.window).scrollTop()+300

   });

});

免责声明:文章转载自《iframe中positioin:fixed失效问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇tomcat闪退的解决思路前端框架现状调查下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

基于HTML5的iPad电子杂志横竖屏自适应方案

基于HTML5的iPad电子杂志横竖屏自适应方案 (转载自:http://www.yeeach.com/?p=1172) 基于HTML5来制作iPad电子杂志,横屏及竖屏自适应是个大问题,查找了半天资料,没有一篇像样的文章可供参考。将思路及例子分享一下。例子并不严谨和规范,仅供参考。 大致思路: 1、对横屏(portrait)和竖屏(landscape)情...

使用vue-print-nb插件页面空白以及打印没有样式问题

在使用vue-print-nb中遇到两个问题: 第一个问题:点击打印后,打印的内容是一片空白 vue-print-nb的原理大概是在你的页面上创建一个iframe,然后把你要打印的那一个div抓出来给iframe。 如上图所示,最后把iframe添加到body中; 当我们点击‘打印’的时候,其实就是调用iframe的print()方法,这样浏览器就自动弹...

taro3.x: 回到顶部ScrollView实现方式

使用ScrollView,onScroll,scrollTop属性设置Math.random()(0-1)之间实现 import React, { useState } from 'react' import { View, Input, ScrollView, Text } from '@tarojs/components' import classn...

Tom猫小游戏功能实现

  本文章通过简单的css和html的操作,来实现Tom猫小游戏的功能,通过简单的js代码,让图片不断切换来实现动画效果。 Tom猫小游戏的HTML部分:    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <...

Androidx Fragment 懒加载机制实现

在到Androidx之前我们使用support提供的Fragment的懒加载机制,基本上使用的是在setUserVisible + onHiddenChanged 这两个函数。但是在Androidx下setUserVisible已经被Google官方弃用了,推荐我们使用Fragment.setMaxLifecyCle()的方式来处理Fragment的懒加载...

如何安全地运行用户的 JavaScript 脚本

本文来自网易云社区,转载务必请注明出处。 有时候我们需要运行用户输入的 JavaScript 脚本(以下简称脚本)。对于我们来说,这些脚本是不可信任的,如果在当前的 Context 中运行这些脚本,它们就能获取到像 cookie、localStorage、DOM 元素等隐私数据,会有潜在的安全问题。 本文所说的用户脚本,是指用户在文本框中输入的 Jav...