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

這裏的源碼比較簡單，看上面的註釋就行了