iframe子元素相对于父页面滚动条固定(iframe无滚动条,iframe固定高度有滚动条,两种情况)
一、当iframe自适应高度,无滚动条时候:
例如这样:
//随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部
$(parent.window).scroll(function() {
var scrollheight = parseInt($(parent.window).scrollTop());
console.log(parseInt($(parent.window).scrollTop()))
if (scrollheight >= 300) {
$("#qn-quc").css({
"position": "absolute",
"top": parseInt($(parent.window).scrollTop()) - 120 + "px" });
} else {
document.getElementById("qn-quc").style = " ";
}
});
或者这样:
//题目按钮固定顶部
$(window.parent.document).scroll(function() {
var scrollheight = parseInt($(window.parent.document).scrollTop());
if (scrollheight >= 300) {
$("#qn-quc").css({
"position": "absolute",
"top": parseInt($(window.parent.document).scrollTop()) - 120 + "px" });
} else {
document.getElementById("qn-quc").style = " ";
}
});
二、当iframe页面存在滚动条就简单很多了
例如这样:
var ie6 = document.all;
var dv = $('#qn-quc'), st;
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st > parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
//监听window滚动条位置 $(window).scroll(function ()
{
var st = $(this).scrollTop();
console.log(st);
});
iframe子元素相对于父页面滚动条固定(iframe无滚动条,iframe固定高度有滚动条,两种情况)的更多相关文章
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值
下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...
- 使用flex防止fit-content子元素冲出父元素宽度的方法
父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...
- JS获取元素宽高的两种情况
JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用 document.getElementById('xxx'). ...
- js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
- CSS子元素margin-top对于父元素的影响
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码如下 <styl ...
- iframe交互(一)父页面自动高度
//父页面源码 <body style="border:1px solid red;width:200px;height:500px;" onload="IFram ...
- HTML中嵌套的子frame如何访问父页面中的函数?
我解决的办法,在父页面写了个函数,然后在frame页面调用父页面的函数,具体代码如下: 父:function a(){} 子frame:window.parent.a(); 问题迎刃而解 https: ...
- margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
随机推荐
- Windows应用程序未响应
昨天在安装postgresql的扩展功能postgis的时候,stackbuilder刚打开就死掉,一直未响应,刚开始以为是内存的原因,后来发现并没有占用太多内存,最后打开vpn发现就可以了,原来是网 ...
- tcp 三次握手,四次挥手几常见面试题
TCP报文首部 源端口和目的端口,各占2个字节,分别写入源端口和目的端口: 序号,占4个字节,TCP连接中传送的字节流中的每个字节都按顺序编号.例如,一段报文的序号字段值是 301 ,而携带的数据共有 ...
- 爱上MVC~业务层刻意抛出异常,全局异常的捕获它并按格式返回
回到目录 对于业务层的程序的致命错误,我们一直的做法就是直接抛出指定的异常,让程序去终断,这种做法是对的,因为如果一个业务出现了致命的阻塞的问题,就没有必要再向上一层一层的返回了,但这时有个问题,直接 ...
- JDBC让java程序连上数据库(mysql数据库)
一.小论异常: 其实JDK已经提供了一组API让java程序连上数据库,并执行SQL语句,其实说起来也蛮简单的,但是绝对是一个细致活,因为稍不留神,异常就铺天盖地的来了,下面说说这些异常吧(声明一下: ...
- 安卓adb调试命令常见的问题
首先本人使用的是ubuntu系统,在Eclipse下开发的时候使用无线调试,在终端直接输入adb connect 114.114.114.114没有问题,给手机安装软件用adb install ** ...
- [LeetCode]9. Palindrome Number回文数
Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same back ...
- IDEA/AS快捷键收集&习惯
1.Alt+Enter单包引入 2.Ctrl+O (在类中)快速重写父类方法 3.Ctrl+F12显示类结构 4.代码提示 -Ctrl+Alt+空格 代码提示 -Ctrl+Shift+回车 在末尾自动 ...
- 2 cmd中startup显示运行不了显示“不是内部或外部命令”
解决方案: 1 在C:\Windows\System32中检查cmd.exe是否存在(如果存在的话)(检查cmd.exe是否被误删) 2 在我的电脑——属性——环境变量——在系统变量找到Path编辑前 ...
- 【干货】JavaScript DOM编程艺术学习笔记7-9
七.动态创建标记 在文档中不写占位图片和文字代码,在能调用js的情况下动态创建,文档支持性更好. 在原来的addLoadEvent prepareGallery showPic的基础上增加函数prep ...
- [转]git修改远程仓库地址
原文链接:http://www.cnblogs.com/lazb/articles/5597878.html 问:Coding远程仓库地址变了,本地git仓库地址如何更新为最新地址 git修改远程仓库 ...