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的 ...
随机推荐
- [unity3d]手游资源热更新策略探讨
原地址:http://blog.csdn.net/dingxiaowei2013/article/details/20079683 我们学习了如何将资源进行打包.这次就可以用上场了,我们来探讨一下手游 ...
- python的dict()函数
dict(one=1,two=2) dict({'one':1,'two':2}) dict((('one',1),('two',2))) dict((['one',1],['two',2])) di ...
- Observer Pattern
Motivation We can not talk about Object Oriented Programming without considering the state of the ob ...
- POJ3468 A Simple Problem With Integers 树状数组 区间更新区间询问
今天学了很多关于树状数组的技巧.一个是利用树状数组可以简单的实现段更新,点询问(二维的段更新点询问也可以),每次修改只需要修改2个角或者4个角就可以了,另外一个技巧就是这题,原本用线段树做,现在可以用 ...
- java数据结构学习(一)之二分查找
二分查找法与我们在孩童时期玩过的猜数的游戏一样,这个游戏里一个朋友会让你猜他正想的一个1至100的数,当你猜了一个数后,他会告诉你三种选择的一个:你猜的比她想的大,或小,或猜中了.为了能用最少的次 ...
- MAC OS JAVA环境变量配置
在 /etc/profile 中 加上这些 #临时提权 sudo su #输入密码 vi /etc/profile #配置JAVA_HOME,此处路径根据自己的版本填写 JAVA_HOME=&quo ...
- Project Euler 76:Counting summations
题目链接 原题: It is possible to write five as a sum in exactly six different ways: 4 + 13 + 23 + 1 + 12 + ...
- 数据挖掘10大算法(1)——PageRank
1. 前言 这系列的文章主要讲述2006年评出的数据挖掘10大算法(见图1).文章的重点将偏向于算法的来源以及算法的主要思想,不涉及具体的实现.如果发现文中有错,希望各位指出来,一起讨论. 图1 来自 ...
- Lumina将是基于 Qt工具箱,旨在取代KDE成为PC-BSD默认的桌面环境
Lumina Desktop 1.1.0 发布了,该版本是重要更新,包括全新的以及完全重新编写的utilities,并对底层基础架构进行改进. Lumina将是基于 Qt工具箱,旨在取代KDE成为PC ...
- jQuery插件开发(转)
jQuery插件开发 - 其实很简单 [前言]jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常 ...