js实现浮动框跟随页面滚动,最后停留在原来位置

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

<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>
时间: 2024-10-16 10:01:41

js实现浮动框跟随页面滚动,最后停留在原来位置的相关文章

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

修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1px solid #A67901;background:#EAEAEA;width:240px;position:absolute;right:0;font-size:12px;font-family:Arial;margin:0px;displa

H5页面导航跟随页面滚动而联动

项目开发过程中遇到一个主页,实现功能: 需要页面在滚动到导航时导航吸顶: 导航随页面滚动高亮选中:点击导航页面滚动到固定位置: 在导航项过多时导航横向滚动: 最后一个面板底部补白且兼容iphoneX. 页面区域划分: 头部数字显示(在页面上拉后隐藏) 导航部分 面板部分(所有的面板放在一个大div里) 效果如下图:           一:页面在滚动到导航时导航吸顶(sticky粘性布局) <!--头部数字--><div class="head-number">

电力项目七--js添加浮动框

1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1px solid #A67901;background:#EAEAEA;width:240px;position:absolute;right:0;font-size:12px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-index:9

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

官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css. 2.Animate.css (下载https://daneden.github.io/animate.css/)非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画 使用方法 1.引入文件<link rel="stylesheet

div随页面滚动遇顶固定的两种方法(js&amp;jQuery)

一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫"层的智能浮动效果".目前我们在国内的商业网站上就常常看到这样的效果了.例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏

scrollReveal.js页面滚动动态效果

scrollReveal.jshttp://www.dowebok.com/134.html简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次:WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件. 虽然 scrollReveal.js 不依赖 anim

ScrollReveal-元素随页面滚动产生动画的js插件

简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次:WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件. 虽然 scrollReveal.js 不依赖 animate.css,但它的动画也是用 CSS3 创建的,所以它不支持 IE10 以下的浏览器.

js页面滚动时层智能浮动定位实现:

案例展示: 第一个:每个人都有看过的淘宝页面: 案例就不多说了,有兴趣的可以多去找找, 这样的智能浮动效果还是不错的,挺方便. 基本的实现原理: 首先有一个默认状态就是没有滚动的时候,什么事情也不用做,定位可以是absolute,也可以是stati,fixed,relartive 这些都可以.我们主要需要关注的是当浏览器滚动的时候,(要浮动的块)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其

js页面滚动浮动层智能定位(jQuery)实现

///js页面滚动浮动层智能定位(jQuery)实现 ///调用:$("#popfloat").smartFloat($("#mainInfo").width() + 21); $.fn.smartFloat = function(width_p) { var position = function(element) { var top = element.position().top, pos = element.css("position")