伯兰的博客

吃不到的葡萄不一定酸,也可能分外的甜

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

要实现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();
            }

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

阅读更多
版权声明:本文为博主原创文章,转载请保留原文链接 https://blog.csdn.net/SuperVictim/article/details/51896899
个人分类: js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭