一、当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固定高度有滚动条,两种情况)的更多相关文章

  1. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  2. 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

  3. 使用flex防止fit-content子元素冲出父元素宽度的方法

    父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...

  4. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  5. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  6. CSS子元素margin-top对于父元素的影响

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码如下 <styl ...

  7. iframe交互(一)父页面自动高度

    //父页面源码 <body style="border:1px solid red;width:200px;height:500px;" onload="IFram ...

  8. HTML中嵌套的子frame如何访问父页面中的函数?

    我解决的办法,在父页面写了个函数,然后在frame页面调用父页面的函数,具体代码如下: 父:function a(){} 子frame:window.parent.a(); 问题迎刃而解 https: ...

  9. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

随机推荐

  1. 页面上AJAX调用数据

    <div class="section page9" data-page='9'> <div class="global-section-wrp med ...

  2. Hadoop实战:微博数据分析

    项目需求 自定义输入格式,将明星微博数据排序后按粉丝数 关注数 微博数 分别输出到不同文件中. 数据集 下面是部分数据,猛戳此链接下载完整数据集 数据格式: 明星   明星微博名称    粉丝数    ...

  3. 【Linux】linux下tar.gz、tar、bz2、zip等解压缩、压缩命令小结

    Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...

  4. 【Java】在eclipse中使用gradle进行项目构建 入门篇

    ##Gradle的安装与配置- Gradle 是以 Groovy 语言为基础,面向Java应用为主,基于DSL(领域特定语言)语法的自动化构建工具. 系统环境变量中添加gradle 前往官网下载Com ...

  5. c++11 多线程入门教程(一)

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/10945309.html 最近在找c++服务端开发的实习(大佬们有推荐吗QAQ..),恰好写了一 ...

  6. 框架使用-Sql拼接

     Sql语句拼写: 查询 DQueryDom DmoQuery(返回的整个对象) 更新 DQUpdateDom 删除 DQDeleteDom 条件 dom.Where.Conditions.Add(D ...

  7. mybatis-plus 异常 Invalid bound statement (not found)

    最近吧项目中添加使用了mybatis-plus,发现操作sql的时候出现异常: Invalid bound statement (not found) ,异常位置位于mybatis-plus的jar中 ...

  8. 大数据kafka视频教程 学习记录【B站尚硅谷 】

    视频地址: https://www.bilibili.com/video/av35354301/?p=1           2019/03/06 21:59 消息队列的内部实现: Kafka基础: ...

  9. oracle中scott用户下四个基本表SQL语句练习

    --选择部门中30的雇员SELECT * from emp where DEPTNO=30;--列出所有办事员的姓名.部门.编号--采用内连接方式,也就是等值链接,也是最常用的链接SELECT ena ...

  10. 【C++函数重载】求3个数中最大的数(分别考虑整数、双精度数、长整数的情况)。

    #include using namespace std; int main( ) { int max(int a,int b,int c); //函数声明 double max(double a,d ...