js把div固定在页面的右下角
在公司做材料系统中,需要做一个总是居于右下角的div,但是因为右边这部分本就是用iframe做的,所以是不好弄的。
一开始,以为用position:fixed,一句css就可以完成,结果在iframe里面这个单页面倒是可以做到,但是一旦有加上模版页面,嵌在iframe中,就不行了。
所以不断搜索啊,问度娘,看到了这个,
<script type="text/javascript">
window.onscroll= window.onresize = window.onload = function (){
var getDiv = document.getElementById('rightBottom');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; getDiv.style.left= document.documentElement.clientWidth - getDiv.offsetWidth+'px';
getDiv.style.top = document.documentElement.clientHeight-getDiv.offsetHeight +scrollTop +'px';
} </script>
但是因为我们是嵌套在iframe中,所以我们找的肯定是夫级页面,所以,代码应该变成如下
window.parent.onscroll = window.parent.onresize = window.onload =function () {
var oFix_box = document.getElementById('select-panel');
var oscrollTop = window.parent.document.documentElement.scrollTop || window.parent.document.body.scrollTop;
oFix_box.style.top = oscrollTop + window.parent.document.documentElement.clientHeight - oFix_box.offsetHeight - + 'px';
$("#select-panel").stop(true,true).animate({ "top": top1 }, );
}
js把div固定在页面的右下角的更多相关文章
- 控制div固定在页面的某个位置 ,用js感觉很麻烦 CSS更好一些
CSS代码:<style type="text/css"> html,body { width:100%; height:100%; margin:0px; paddi ...
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
- js实现div滚动条在页面刷新 滚动条位置固定
思想:1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie 2.页面加载时再读取document.cookie的值,设置给div的scrollTo ...
- DIV固定在页面某个位置,不随鼠标滚动而滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
- JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...
- js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- JS控制div跳转到指定的位置的解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...
- 【转载自W3CPLUS】如何将页脚固定在页面底部
该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
随机推荐
- TensorFlow 基本使用
使用 TensorFlow, 你必须明白 TensorFlow: 使用图 (graph) 来表示计算任务. 在被称之为 会话 (Session) 的上下文 (context) 中执行图. 使用 ten ...
- jQuery中的&& ||
jQuery1.2.6 clean方法中有这么一段第一眼看去会让人晕掉的方法.完全不知其所言. “||, && 可以这样用?”,“这段东西最终返回的是个什么对象啊?” // Trim ...
- Embedding Lua in C: Using Lua from inside C.
Requirments: 1: The Lua Sources. 2: A C compiler - cc/gcc/g++ for Unix, and Visual C++ for Wi ...
- ssh 公钥
以前做ssh key登录方式时都是用的root帐号,基本都是无往不利的,权限采用默认即可.今天实验中两台机器帐号都是nianzong,一个普通的帐号.按照如下步骤: A机器:ssh-keygen -t ...
- 深入理解JVM—Java 6 JVM参数配置说明
原文地址:http://yhjhappy234.blog.163.com/blog/static/316328322011119111014657/ 使用说明< xmlnamespace pre ...
- 546C. Soldier and Cards
题目链接 题意 两个人玩扑克,共n张牌,第一个人k1张,第二个人k2张 给定输入的牌的顺序就是出牌的顺序 每次分别比较两个人牌的第一张,牌上面数字大的赢,把这两张牌给赢的人,并且大的牌放在这个人的牌最 ...
- leetcode 4 : Median of Two Sorted Arrays 找出两个数组的中位数
题目: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...
- 修改 eclipse 文件编码格式
如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Java文件使用UTF-8编码.然而,Eclipse工作空间(workspace)的缺省字符编码是操作系统缺省的编码,简 ...
- Linux卸载系统自带的httpd的方法
卸载linux自带的httpd服务: 方法一: #rpm -e httpd 结果,出现以下错误 httpd-mmn = 20020628 is needed by (installed) mod_pe ...
- 语言基础:C#运算符
运算符 分类 符号 解释 优先级 算术运算符 ++ -- 加加 减减 由高到低,即执行顺序由上到下.(圆括号的优先级最高) * / % 乘 除 取余 + - 加 减 关系运 ...