左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置。

<div style="background:red; width:1000px; height:7000px; margin:auto;">&nbsp;&nbsp;</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实现浮动框跟随页面滚动,最后停留在原来位置的更多相关文章

  1. jQuery实现浮动层跟随页面滚动效果

      helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery  滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...

  2. 电力项目十三--js添加浮动框

    修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...

  3. 电力项目十一--js添加浮动框

    1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1p ...

  4. angular8 页面滚动到某一个特定位置

    背景:使用angular8安装的 Fuse-v8.0.0-demo 后台的框架 锚点: id='nearby' 流程:无论是点击触发方法也好,还是直接调用方法也好,这里只写 引入: import {C ...

  5. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  6. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  7. div跟随页面滚动

    $(document).ready(function(){ var timer; $(window).scroll(function (){ clearInterval(timer); var top ...

  8. Jquery当div超出页面时就固定到顶部否则跟随页面滚动

    $.fn.smartFloat = function () { var position = function (element) { var top = element.position().top ...

  9. 页面滚动到指定class样式位置

    var winTop =$(window).scrollTop(); var top = document.getElementsByClassName('is-danger')[0].getBoun ...

随机推荐

  1. Ubuntu 16.04 GNOME添加桌面图标/在桌面上显示图标

    GNOME默认不能在桌面上创建文件夹,但是可以通过工具设置:用gnome-tweak-tool设置Nautilus接管桌面即可. 安装: sudo apt-get install gnome-twea ...

  2. Servlet的服务端响应

    以下内容引用自http://wiki.jikexueyuan.com/project/servlet/server-response.html: 当一个Web服务器对浏览器响应一个HTTP请求时,响应 ...

  3. Redis开源项目的终极杀手? ——CRUG解读Redis开源协议变更

    引言: 数据库制造商 Redis Labs 本周将公司开发的Redis 模块从 AGPL 迁移到将 Apache v2.0 与 Commons Clause 相结合的许可证,对许可证涵盖的软件作了限制 ...

  4. javascript下获取guid或者UTC时间作为唯一值

    javascript下,有时出于需要,可以利用guid或UTC时间作为当前页面中的唯一值. 什么场景需要弄这个唯一值? 比如说,用easyUI的treegrid,添加新节点.在treegrid里面 , ...

  5. YTU 2641: 填空题:静态成员---计算学生个数

    2641: 填空题:静态成员---计算学生个数 时间限制: 1 Sec  内存限制: 128 MB 提交: 267  解决: 206 题目描述 学生类声明已经给出,在主程序中根据输入信息输出实际建立的 ...

  6. JFreeChart自我总结

    想飞就别怕摔 大爷的并TM骂人 JFreeChart自我总结 1.饼图.柱状图.折线图生成的工具类   1 package com.text.util;  2   3 import java.awt. ...

  7. Silverlight之控件应用总结(二)(4)

    [置顶] Silverlight之控件应用总结(二)(4) 分类: 技术2012-04-03 22:12 846人阅读 评论(0) 收藏 举报 silverlightradiobuttonhyperl ...

  8. 【HDU 4547】 CD操作

    [题目链接] 点击打开链接 [算法] 分四种情况讨论 : 1. 当前目录和目标目录是同一目录,不需要变换,答案为0 2. 当前目录是目标目录的祖先,答案为当前目录的深度 - 目标目录的深度 3. 当前 ...

  9. 洛谷P2831 愤怒的小鸟——贪心?状压DP

    题目:https://www.luogu.org/problemnew/show/P2831 一开始想 n^3 贪心来着: 先按 x 排个序,那么第一个不就一定要打了么? 在枚举后面某一个,和它形成一 ...

  10. oracle 定时器调用存储过程

    转载请说明出处:http://t22011787.iteye.com/blog/1112745 一.查询系统中的job,可以查询视图 --相关视图 select * from dba_jobs; se ...