js实现div固定在屏幕的某一个位置

原创 2016年07月13日 12:16:56

要实现div块固定在屏幕的某一个位置可以使用js来实现,这个实现比较简单,下面来看下效果:
这里写图片描述
原理就是监听window对象的onscroll事件,获取鼠标移动了多少距离,然后给这个需要固定的div加上屏幕滚动的距离,就可以实现屏幕固定了。
这个同样要设置一下这个需要固定的div的style属性,然后我们来看一下屏幕滚动之后的这个div的style属性的变化:
这里写图片描述
从上面看到这个style属性的margin-top属性一直在变化,下面上源码:

//代表要跟随页面移动的div原型对象
            function obj(id) {
                this.e = document.getElementById(id);
                console.log("e:" + this.e);
                //记录屏幕滚动的宽度
                this.x = 0;
                this.style = "";
                //获取style的值并保存
                this.getStyle();
            }
            //获取根元素的style
            obj.prototype.getStyle = function() {
                var styles = this.e.getAttribute("style").split(";");
                for(var i = 0; i < styles.length - 1; i++) {    
                    this.style += styles[i] + ";";
                }
                console.log("this.style: " + this.style);
                var oldMarginTopStr = styles[styles.length - 1];
                console.log("oldMarginTopStr:" + oldMarginTopStr);
                var marginSplit = oldMarginTopStr.split(":");
                var marginStr = marginSplit[marginSplit.length-1];
                //截取marginTop的数字
                var margin  = marginStr.substring(0, marginStr.length-2);
                console.log("margin:" + margin);
                this.oldMargin = parseInt(margin);
            }
            //设置顶部边距
            obj.prototype.setMarginTop = function() {
                //计算滚动之后的margin值
                var margin = this.oldMargin + this.x;
                margin = "margin-top:" +margin + "px";
                var newStyle = this.style + margin;
                console.log("newSytle:" + newStyle);
                this.e.setAttribute("style", newStyle);
            }
            //创建div对象
            var divObj = new obj("scr");
            //给屏幕的滚动事件添加函数
            window.onscroll = function() {
                //获取屏幕滚动的宽度
                divObj.x = document.documentElement.scrollTop || document.body.scrollTop;
                console.log("x:" + divObj.x);
                //设置目标div的margin-top属性
                divObj.setMarginTop();
            }

这里的源码比较简单,看上面的注释就行了

版权声明:本文为博主原创文章,转载请保留原文链接

js固定div在屏幕最右边

demo     $(function(){         (function(){             //ie6特别处理             if( ![1,] &&...
  • hu_mouse
  • hu_mouse
  • 2015年07月07日 14:06
  • 837

js控制div 在页面的固定位置

  用js控制div,使div 总能在当窗体的某一位置。window.onresize = resizeDiv;        window.onscroll = resizeDiv;        ...
  • love_rrr
  • love_rrr
  • 2009年06月12日 15:30
  • 9198

让DIV一直固定在屏幕的某个位置

#low_right { position: fixed; width: 90px; height: 90px;...
  • z1119815468
  • z1119815468
  • 2013年11月05日 10:44
  • 3255

js实现div固定在屏幕的某一个位置

要实现div块固定在屏幕的某一个位置可以使用js来实现,这个实现比较简单,下面来看下效果: 原理就是监听window对象的onscroll事件,获取鼠标移动了多少距离,然后给这个需要固定的di...
  • SuperVictim
  • SuperVictim
  • 2016年07月13日 12:16
  • 2810

31、JavaScript中,让一个div在固定的父div中任意拖动

1、css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300...
  • zbw18297786698
  • zbw18297786698
  • 2016年06月18日 22:21
  • 2603

使div或图标一直固定在屏幕的某个位置

先在head引入css、js文件
  • NN_nan
  • NN_nan
  • 2017年02月28日 10:19
  • 421

Div固定在屏幕右边的指定位置

#divCollapse {     display:none;     bottom: 40px;     right: 3px;             /*举例右边3像素*/     ...
  • limlimlim
  • limlimlim
  • 2013年09月27日 11:35
  • 9305

JS+DIV 实现拖动效果

效果图 思路 代码 优化封装以及解决拖动问题事件捕获效果图思路代码 Title ...
  • mixi9760
  • mixi9760
  • 2016年07月28日 20:59
  • 4168

html+js+css固定表格行列

  • 2010年11月30日 11:10
  • 7KB
  • 下载

div始终位于屏幕底部

简述: 在拖拉过程中,是的某个div始终位于屏幕底部 代码: $(function(){ // 首先计算屏幕高度 var height = document.body.clientH...
  • anialy
  • anialy
  • 2014年03月05日 10:44
  • 5387
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js实现div固定在屏幕的某一个位置
举报原因:
原因补充:

(最多只允许输入30个字)