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

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