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跟着一起往下走了! ...
随机推荐
- 022 Generate Parentheses 生成括号
给 n 对括号,写一个函数生成所有合适的括号组合.比如,给定 n = 3,一个结果为:[ "((()))", "(()())", "(())() ...
- UVA 5986 - Wizarding Duel 超级脑洞题
给出n个人,每个人两两比赛一场,一共有C(n,2)场比赛,现在给出一个榜,问其是否合法.不合法的话,就改成合法,输出最小需要改的变化. 分数一定是C(n,2)的了, 不和法的情况,比如0,0,2,是不 ...
- Django学习笔记(13)——Django的用户认证(Auth)组件,视图层和QuerySet API
用户认证组件的学习 用户认证是通过取表单数据根数据库对应表存储的值做比对,比对成功就返回一个页面,不成功就重定向到登录页面.我们自己写的话当然也是可以的,只不过多写了几个视图,冗余代码多,当然我们也可 ...
- matlab 常用函数(数学建模-复习)
常用函数 fscanf(fid, '%c', inf) -> 直接读取整个文件, 因为inf表示无穷 strtrim char(num): 将num转为ASCII字符 strtok(conten ...
- 使用nasm和clang
nasm编译 nasm -f macho64 --prefix _ demo.asm # --prefix是为gobal的标签添加前缀, 链接时根据的都是以_开头的 clang编译 clang tes ...
- Unity C# 运用 GetSaveFileName() 导出Excel文件
本文原创,转载请注明出处:http://www.cnblogs.com/AdvancePikachu/p/6944870.html 唉哟,这次厉害咯,网上搜罗了好久,终于被我找到汉化的保存对话框了,根 ...
- C#获得字符串首字符字母(大写)
/// <summary> /// 获得字符串首字符字母(大写): /// </summary> /// <param name="cnChar"&g ...
- js对secure的支持是没问题的,httponly是为限制js而产生的,当然httponly的cookie也不会被js创建
function setCookie4(c_name,value,expiredays){ var cookieStr = ""; var exdate=new Date(); e ...
- Oracle Hyperion Planning 11.1 .1:创建与管理应用程序 第1课:Planning概述
第1课:Planning概述 1.说明 Oracle Enterprise Performance Management system Oracle Enterprise Performance Ma ...
- cocos2d-x-2.2.0_win7+vs2010搭建_eclipse+ndk-r9+cygwin搭建_教程以及编译问题汇总
声明:我是才用c/c++和cocos2d-x的如果有错误欢迎指出 文章内容我亲测过可以通过,同时我也会一直更新内容 感谢那些把自己的东西分享出来的人 原文地址:http://www.cnblogs.c ...