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的 ...
随机推荐
- MongoDB 性能优化五个简单步骤
MongoDB 一直是最流行的 NoSQL,而根据 DB-Engines Ranking 最新的排行,时下 MongoDB 已经击败 PostgreSQL 跃居数据库总排行的第四位,仅次于 Oracl ...
- MATERIALIZED VIEW
Oracle的实体化视图提供了强大的功能,可以用在不同的环境中,实体化视图和表一样可以直接进行查询.实体化视图可以基于分区表,实体化视图本身也可以分区. 主要用于预先计算并保存表连接或聚集等耗时较多的 ...
- 【转载】Eclipse自动编译问题
今天调试的时候发现问题:调试的时候竟然在我注释的里面走,当时那个郁闷啊,每次都要clean下才可以,晚上感觉不对劲,上网查了查,原来是bulid automatically这个我把勾去掉了,下面是原文 ...
- Linux查看随机启动服务
Liunx操作系统跟Windos XP一样,有一批系统服务随机而启动:略懂电脑的Windows XP用户会禁止那些不必要的服务,以提高开机速度:如今安装了Ubuntu操作系统,咱们也有必要了解Ubun ...
- spring webservice 搭建出现的异常处理。异常: NAMESPACE_ERR: An attempt is made to create or change an object in a way whi
异常:NAMESPACE_ERR: An attempt is made to create or change an object in a way whi---- 这是我自己写客户端调用webse ...
- P1024 外星人的密码数字
P1024 外星人的密码数字 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 XXXX年突然有外星人造访,但大家语言不通,不过科学家们经过研究发现外星 ...
- 合并傻子//区间dp
P1062 合并傻子 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 从前有一堆傻子,钟某人要合并他们~但是,合并傻子是要掉RP的...... 描述 在一个园 ...
- lintcode :最大子数组
题目: 最大子数组 给定一个整数数组,找到一个具有最大和的子数组,返回其最大和. 样例 给出数组[−2,2,−3,4,−1,2,1,−5,3],符合要求的子数组为[4,−1,2,1],其最大和为6 ...
- Sina App Engine(SAE)入门教程(10)- Cron(定时任务)使用
参考资料 SAE Cron说明文档 Cron能干什么? cron 可以定时的触发一个脚本,在sae上最大的频率是一分钟一次.你可以用其来完成自己需要的业务逻辑,例如定期的抓取某些网页完菜信息的采集,定 ...
- WCF入门(七)---自托管消费WCF服务
费自托管WCF服务的整个过程,一步步地解释以及充足的编码和屏幕截图是非常有必要. 第1步:服务托管,现在我们需要实现的代理类客户端.创建代理的方式不同. 使用svcutil.exe,我们可以创建代理类 ...