在公司做材料系统中,需要做一个总是居于右下角的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固定在页面的右下角的更多相关文章

  1. 控制div固定在页面的某个位置 ,用js感觉很麻烦 CSS更好一些

    CSS代码:<style type="text/css"> html,body { width:100%; height:100%; margin:0px; paddi ...

  2. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  3. js实现div滚动条在页面刷新 滚动条位置固定

    思想:1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie 2.页面加载时再读取document.cookie的值,设置给div的scrollTo ...

  4. DIV固定在页面某个位置,不随鼠标滚动而滚动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  5. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  6. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  7. html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  8. JS控制div跳转到指定的位置的解决方案总结

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...

  9. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

随机推荐

  1. new Date()的数据类型的问题

    function getServerNow(){ return new Date(new Date() + svrMinusLocal); } svrMinusLocal是服务器时间减本地时间的时间差 ...

  2. HDU 1829 A Bug's Life(种类并查集)

    思路:见代码吧. #include <stdio.h> #include <string.h> #include <set> #include <vector ...

  3. eclipse 或MyEclipse将工程进行移动的时候会对@Override报错的处理方法

    有时候导入javaSE,javaEE,android 工程的时候,明明是刚刚用过的没有问题的工程,但重新导入的时候就报错. 提示The method ... must override a sperc ...

  4. c# 在windows服务中 使用定时器

    由于最近做自动执行的程序,开始做windows服务程序, 在windows服务中如何使用定时器的时候一直失效, 以前是直接拖入timer控件,但是不能直接运行,后来在网上找了一段程序,好使了. //开 ...

  5. 【转】 wget 命令用法详解

    wget是在Linux下开发的开放源代码的软件,作者是Hrvoje Niksic,后来被移植到包括Windows在内的各个平台上.它有以下功能和特点:(1)支持断点下传功能:这一点,也是网络蚂蚁和Fl ...

  6. Project Euler 75:Singular integer right triangles

    题目链接 原题: It turns out that 12 cm is the smallest length of wire that can be bent to form an integer ...

  7. 【memcache缓存专题(1)】memcache的介绍与应用场景

    简介 Memcached是一个高性能的分布式的内存对象缓存系统,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各 ...

  8. Dropbox 有哪些鲜为人知的使用技巧?

    作者:Feeng链接:http://www.zhihu.com/question/20104959/answer/13991578来源:知乎著作权归作者所有,转载请联系作者获得授权. 原文:The B ...

  9. 254. Factor Combinations

    题目: Numbers can be regarded as product of its factors. For example, 8 = 2 x 2 x 2; = 2 x 4. Write a ...

  10. PCL—低层次视觉—点云分割(最小割算法)

    1.点云分割的精度 在之前的两个章节里介绍了基于采样一致的点云分割和基于临近搜索的点云分割算法.基于采样一致的点云分割算法显然是意识流的,它只能割出大概的点云(可能是杯子的一部分,但杯把儿肯定没分割出 ...