各位朋友，大家好，在卡发的过程中遇到了iframe中子页面fixed失效的问题 现在来解决一下。
首先是一个a.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript 仿LightBox内容显示效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
</head>
<body style="width: 980px; background-color: white;">
<iframe id="main" name="main" width="980" scrolling="no" frameborder="0" src="bb.html"
οnlοad="this.height=main.document.body.scrollHeight; this.width=main.document.body.scrollWidth;if(this.height < 410){this.height=410;}">
</iframe>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
</html>
然后是b.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript 仿LightBox内容显示效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
</head>
<body style="width: 980px; background-color: white;">
<!--模拟弹出窗口的那个div-->
<div style="width: 980px; height: 1000px;">
<div id="box" style="height: 50px; width: 50px; margin-top: 100px; margin-left: 400px; background: red; position: fixed; z-index:100000000">
aaaa
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
这里注意一下：
<script type="text/javascript">
$(parent.window).scroll(function(){
$('#box').css({
top : $(parent.window).scrollTop()
});
});
</script>
</html>
这样红色方块在a.html中就不会随着滚动条而滚动了。
796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
