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跟着一起往下走了! ...
随机推荐
- Appium + Python自动化3 - 输入中文
在做app自动化过程中会踩很多坑,咱们都是用中文的app,所以首先要解决中文输入的问题!本篇通过屏蔽软键盘,绕过手机的软键盘方法,解决中文输入问题. 一.定位搜索 1.打开淘宝点击搜索按钮,进入搜索页 ...
- 034 Search for a Range 搜索范围
给定一个已经升序排序的整形数组,找出给定目标值的开始位置和结束位置.你的算法时间复杂度必须是 O(log n) 级别.如果在数组中找不到目标,返回 [-1, -1].例如:给出 [5, 7, 7, 8 ...
- kotlin查看编译后的Java代码
java学一下kotlin,由于用的是同样的jvm,那就说明他们的字节码文件应该是一样的,那么,如果我们能看到编译后的文件,那么学的更快了. 操作 1.打开一个.kt文件 2.在Android Stu ...
- 使用Foxfly.Net读取STEP文件
Foxfly.Net是具备基本的几何建模和CAD文件读取功能.本文主要介绍读取STP/STEP文件的使用方法. 1.初始化 项目中引入FoxflyNet.dll程序集,在Program.cs中初始化建 ...
- 018.Java类加载器
https://www.ibm.com/developerworks/cn/java/j-lo-classloader/ 类加载器(class loader) 用来加载 Java 类到 Java 虚拟 ...
- $(formName).data(“bootstrapValidator”).getFieldElements('fieldName'); 校验单个字段
问题也出自于业务系统后台,应该来说也比较常见吧 房产类型分为一抵和二抵,二抵的时候用户必须填写一抵债权金额,一抵的时候则不显示一抵债权金额也不校验,因为我所有的校验都是写在标签上,哪些必填直接写在标签 ...
- MATLAB之易经卜卦程序+GUI
MATLAB之易经卜卦程序+GUI 日月为易,刚柔相推. 是故易有太极,是生两仪,两仪生四象,四象生八卦,八卦定吉凶,吉凶生大业.是故法象莫大乎天地,变通莫大乎四时,悬象著明莫大乎日月. 本文 ...
- windows无法连接到打印机 操作失败,错误为0x00000002 解决方案
平时使用局域网打印机没有问题,今天突然脱机了,错误号为0x00000002 服务器上打印机一切正常,别人使用也一切正常. 最后,重启了Spooler服务后搞定. 重新链接打印机,搞定!
- 使用tooltip显示jquery.validate.unobtrusive验证信息
通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = " ...
- LeetCode Move Zeroes (简单题)
题意: 给定一个整型数组nums,要求将其中所有的0移动到末尾,并维护所有非0整数的相对位置不变. 思路: 扫一遍,两个指针维护0与非0的交界,将非0的数向前赋值就行了. C++ class Solu ...