js实现浮动框跟随页面滚动,最后停留在原来位置
左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置。
<div style="background:red; width:1000px; height:7000px; margin:auto;"> </div>
<div id="aa" style="position: absolute;right: 0px; top: 4600px;"><img src="001.jpg"/></div>
<script>
function scrollx(p){
var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie6 = /msie 6/i.test(navigator.userAgent),style,timer;
if(o){
o.style.cssText +=";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.l==undefined?'left:0;':'left:'+p.l+'px;')+(p.t!=undefined?'top:'+p.t+'px':'bottom:0');
if(p.f&&ie6){
o.style.cssText +=';left:expression(documentElement.scrollLeft + '+(p.l==undefined?dd.clientWidth-o.offsetWidth:p.l)+' + "px");top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';
dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;';
}else{
if(!p.f){
w.onresize = w.onscroll = function(){
clearInterval(timer);
timer = setInterval(function(){
//双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0
var st = (dd.scrollTop||db.scrollTop),c;
c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);
if(c!=0){
o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';
}else{
clearInterval(timer);
}
},10) } }
}
}
}
scrollx({
id:'aa',
t:300,
}) /*
id 你要滚动的内容的id
l 横坐标的位置 不写为紧贴右边
t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边
f 1表示固定 不写或者0表示滚动
*/
</script>
js实现浮动框跟随页面滚动,最后停留在原来位置的更多相关文章
- jQuery实现浮动层跟随页面滚动效果
helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery 滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...
- 电力项目十三--js添加浮动框
修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...
- 电力项目十一--js添加浮动框
1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1p ...
- angular8 页面滚动到某一个特定位置
背景:使用angular8安装的 Fuse-v8.0.0-demo 后台的框架 锚点: id='nearby' 流程:无论是点击触发方法也好,还是直接调用方法也好,这里只写 引入: import {C ...
- wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
- div跟随页面滚动
$(document).ready(function(){ var timer; $(window).scroll(function (){ clearInterval(timer); var top ...
- Jquery当div超出页面时就固定到顶部否则跟随页面滚动
$.fn.smartFloat = function () { var position = function (element) { var top = element.position().top ...
- 页面滚动到指定class样式位置
var winTop =$(window).scrollTop(); var top = document.getElementsByClassName('is-danger')[0].getBoun ...
随机推荐
- JVM(二):Java中的语法糖
JVM(二):Java中的语法糖 上文讲到在语义分析中会对Java中的语法糖进行解糖操作,因此本文就主要讲述一下Java中有哪些语法糖,每个语法糖在解糖过后的原始代码,以及这些语法糖背后的逻辑. 语法 ...
- Ubuntu 16.04安装***-qt5
上一篇文章http://www.cnblogs.com/EasonJim/p/7133097.html中,第5步安装本地代理源服务器使用的是electron-ssr,发觉这个东西难配且难用,非常不建议 ...
- 基于TensorFlow的图片识别服务
1.使用TensorFlow Retrain进行图片分类训练 https://www.tensorflow.org/versions/master/how_tos/image_retraining/i ...
- 华为AR1220
今天刚刚收到华为AR1220,以为直接就可以用web界面管理,结果开机后才知道web管理界面需要激活.下面简单分享这个过程:*** 用控制台线(一边RJ45,一边9针串)连接Router consol ...
- poj 3233(矩阵高速幂)
题目链接:http://poj.org/problem?id=3233. 题意:给出一个公式求这个式子模m的解: 分析:本题就是给的矩阵,所以非常显然是矩阵高速幂,但有一点.本题k的值非常大.所以要用 ...
- 解决ubuntu中firefox浏览器总是提示找不到server的问题
这个情况在我机器上常常出现,并且时不时的给你出点问题.可是有些时候等一下就好了.或者把引擎换到百度的话它就又行得通了.. 被这个问题搞得非常烦.上网查了下说是防火墙啊之类的出问题.可是自己弄了后这个问 ...
- Noip模拟 Day6.12
第一题:贪吃蛇(snake) 本题其实就是判断一个有向图中有没有环,做一次拓扑排序就可以了,如果所有点都入队了,就表示没有环,否则就有环.或者就是dfs一次,每个点只需要被访问一次,这样也是O(n)的 ...
- 一起talk C栗子吧(第九十回:C语言实例--使用管道进行进程间通信三)
各位看官们,大家好,上一回中咱们说的是使用管道进行进程间通信的样例.这一回咱们说的样例是:使用管道进行进程间通信.只是使用管道的方式不同样.闲话休提,言归正转.让我们一起talk C栗子吧! 我们在前 ...
- ionic2 在执行ionic serve后报 build dev failed: Cannot set property 'fileSystem' of null
ionic2 真是烦人,因为环境依赖的问题还有网络的问题,不知砸的,项目放一段事件不运行就会出问题. 我一开始是 用 cnpm install安装的依赖,其中也报了错, 然后执行 ionic serv ...
- clojure一些笔记
https://xumingming.sinaapp.com/302/clojure-functional-programming-for-the-jvm-clojure-tutorial/#intr ...