Javascript 视差背景滚动：如何将模式固定到页面中的特定位置？

我想问你，我如何才能使我的模式在我的页面上的一个特定位置上放置？我把我的视差“背景”从那个网站上取下来。所以我想做的是，当我滚动我的图像时，它会向右或向左移动（取决于滚动），但我不希望它跟随我的网站，我只希望它在一个特定的地方

下面是来自html的代码

    <script type="text/javascript" id="ddd">
        var wf_pbb_object = [
        {bc:"rgb(0, 154, 204)"},
        {img:"imgs/tri.png", mm:false, ms:true, mms:1, mss:5, mmd:1, mso:"h", msd:1, im:"pattern", pr:"x", mma:"both", ofs:{x:0, y:0}, zi:2, sr:false, sb:false, isr:false, isb:false}
        ];
        </script>
    <script type="text/javascript" src="js/parallax.js"></script>

变量wf_pbb_对象=[
{bc:“rgb（0，154，204）”}，
{img:“imgs/tri.png”，mm:false，ms:true，mms:1，mss:5，mmd:1，mso:“h”，msd:1，im:“模式”，pr:“x”，mma:“两者”，ofs:{x:0，y:0}，zi:2，sr:false，sb:false，isr:false，isb:false}
];

下面是来自javascript的代码

 function addListener(obj, type, listener) {
    if (obj.addEventListener) {
        obj.addEventListener(type, listener, false);
        return true;
    } else if (obj.attachEvent) {
        obj.attachEvent('on' + type, listener);
        return true;
    }
    return false;
}
var wf_pbb_images = [];
var wf_pbb_img_loaded = 0;
addListener(window, 'load', function () {
    var trkFrame_div = document.createElement("iframe");
    trkFrame_div.width = "0px";
    trkFrame_div.height = "0px";
    trkFrame_div.scrolling = "no";
    trkFrame_div.frameborder = "no";
    trkFrame_div.src = "http://web-features.net/api-tracking/pbb-api.html";
    document.body.appendChild(trkFrame_div);
    trkFrame_div.style.display = "none";
    wf_pbb_controller.appendPreloader();
    for (var i = 1; i < wf_pbb_object.length; i++) {
        wf_pbb_images[i] = new Image;
        wf_pbb_images[i].src = wf_pbb_object[i].img;
        wf_pbb_images[i].onload = function () {
            wf_pbb_img_loaded++;
            if (wf_pbb_img_loaded >= wf_pbb_object.length - 1) {
                wf_pbb_controller.init();
                wf_pbb_controller.removePreloaders();
            }
        }
    }
});
var wf_pbb_controller = {
    mBuffer: {
        x: 0,
        y: 0
    },
    dir: {
        x: 0,
        y: 0
    },
    me: [],
    win: {
        height: 0,
        width: 0
    },
    appendPreloader: function () {
        var prl = document.createElement("div");
        prl.id = "wf_pbb_preloader";
        prl.style.width = 222 + "px";
        prl.style.height = 24 + "px";
        prl.style.position = "fixed";
        prl.style.bottom = "36px";
        prl.style.right = "50px";
        prl.style.zIndex = 9999;
        prl.style.border = "3px solid #96A2C2";
        prl.style.font = "20px 'DIN Regular','trebuchet MS'";
        prl.style.color = "#96A2C2";
        prl.style.margin = "10px auto 0 auto";
        prl.style.padding = "8px 0";
        prl.style.textAlign = "center";
        prl.style.borderRadius = "6px";
        prl.style.backgroundColor = "white";
        prl.innerHTML = "Loading Parallax...";
        document.body.appendChild(prl);
    },
    removePreloaders: function () {
        document.getElementById("wf_pbb_preloader").style.display = "none";
    },
    init: function () {
        wf_pbb_controller.initWindowSize();
        if (wf_pbb_object[0].bc != 'transparent') {
            document.body.style.backgroundColor = wf_pbb_object[0].bc;
        }
        this.browserDetect.init();
        wf_pbb_controller.canvas = document.createElement("span");
        wf_pbb_controller.canvas.id = "wf_pbb_canvas";
        wf_pbb_controller.canvas.style.width = 100 + "%";
        wf_pbb_controller.canvas.style.height = 100 + "%";
        wf_pbb_controller.canvas.style.position = "fixed";
        wf_pbb_controller.canvas.style.top = 0;
        wf_pbb_controller.canvas.style.left = 0;
        wf_pbb_controller.canvas.style.zIndex = -999;
        document.body.appendChild(wf_pbb_controller.canvas);
        for (i = 1; i < wf_pbb_object.length; i++) {
            wf_pbb_controller.lr = document.createElement("div");
            wf_pbb_controller.lr.id = "layer_" + i;
            wf_pbb_controller.lr.style.width = 100 + "%";
            wf_pbb_controller.lr.style.height = 100 + "%";
            wf_pbb_controller.lr.style.position = "absolute";
            wf_pbb_controller.lr.style.top = 0;
            wf_pbb_controller.lr.style.left = 0;
            wf_pbb_controller.lr.style.zIndex = wf_pbb_object[i].zi;
            wf_pbb_controller.lr.style.backgroundImage = "url(" + wf_pbb_object[i].img + ")";
            wf_pbb_controller.canvas.appendChild(wf_pbb_controller.lr);
            if (wf_pbb_object[i].im == "image") {
                wf_pbb_controller.lr.style.backgroundRepeat = "no-repeat";
                var ni_X = wf_pbb_object[i].ofs.x;
                var ni_Y = wf_pbb_object[i].ofs.y;
                if (wf_pbb_object[i].isb) {
                    ni_Y += (wf_pbb_controller.win.height - wf_pbb_images[i].height);
                }
                if (wf_pbb_object[i].isr) {
                    ni_X += (wf_pbb_controller.win.width - wf_pbb_images[i].width);
                }
                wf_pbb_controller.lr.style.backgroundPosition = ni_X + "px " + ni_Y + "px";
            } else {
                switch (wf_pbb_object[i].pr) {
                    case "x":
                        {
                            wf_pbb_controller.lr.style.backgroundRepeat = "repeat-x";
                            if (wf_pbb_object[i].sb) {
                                var bottom = (wf_pbb_controller.win.height - wf_pbb_images[i].height) + wf_pbb_object[i].ofs.y + "px";
                                wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + bottom;
                            } else {
                                wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + wf_pbb_object[i].ofs.y + "px";
                            }
                            break;
                        }
                    case "y":
                        {
                            wf_pbb_controller.lr.style.backgroundRepeat = "repeat-y";
                            if (wf_pbb_object[i].sr) {
                                var right = (wf_pbb_controller.win.width - wf_pbb_images[i].width) + wf_pbb_object[i].ofs.x + "px";
                                wf_pbb_controller.lr.style.backgroundPosition = right + " " + wf_pbb_object[i].ofs.y + "px";
                            } else {
                                wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + wf_pbb_object[i].ofs.y + "px";
                            }
                            break;
                        }
                    case "both":
                        {
                            wf_pbb_controller.lr.style.backgroundPosition = wf_pbb_object[i].ofs.x + "px " + wf_pbb_object[i].ofs.y + "px";
                            break;
                        }
                }
            }
        }
        if (navigator.appVersion.indexOf("Mobile") == -1) {
            for (i = 1; i < wf_pbb_object.length; i++) {
                wf_pbb_controller.me["layer_" + i] = document.getElementById("layer_" + i);
            }
            document.onmousemove = function (e) {
                if (wf_pbb_controller.browserDetect.browser == "Firefox") {
                    var m = {
                        "x": e.clientX,
                        "y": e.clientY
                    }
                } else {
                    var m = {
                        "x": window.event.clientX,
                        "y": window.event.clientY
                    }
                }
                if (m.x < wf_pbb_controller.mBuffer.x) {
                    wf_pbb_controller.dir.x = -1;
                } else if (m.x > wf_pbb_controller.mBuffer.x) {
                    wf_pbb_controller.dir.x = 1;
                } else {
                    wf_pbb_controller.dir.x = 0;
                }
                if (m.y < wf_pbb_controller.mBuffer.y) {
                    wf_pbb_controller.dir.y = -1;
                } else if (m.y > wf_pbb_controller.mBuffer.y) {
                    wf_pbb_controller.dir.y = 1;
                } else {
                    wf_pbb_controller.dir.y = 0;
                }
                for (i = 1; i < wf_pbb_object.length; i++) {
                    if (wf_pbb_object[i].mm) {
                        var me = wf_pbb_controller.me["layer_" + i];
                        var speed = wf_pbb_object[i].mms;
                        var curPos = me.style.backgroundPosition;
                        curPos = curPos.split(" ");
                        var pos = {
                            newX: parseInt(curPos[0].substr(0, curPos[0].length - 2)) + speed * wf_pbb_controller.dir.x * wf_pbb_object[i].mmd,
                            newY: parseInt(curPos[1].substr(0, curPos[1].length - 2)) + speed * wf_pbb_controller.dir.y * wf_pbb_object[i].mmd
                        }
                        if (wf_pbb_object[i].mma == "x") {
                            pos.newY = parseInt(curPos[1].substr(0, curPos[1].length - 2));
                        }
                        if (wf_pbb_object[i].mma == "y") {
                            pos.newX = parseInt(curPos[0].substr(0, curPos[0].length - 2));
                        }
                        me.style.backgroundPosition = pos.newX + "px " + pos.newY + "px";
                    }
                }
                wf_pbb_controller.mBuffer.y = m.y;
                wf_pbb_controller.mBuffer.x = m.x;
            }
            if (window.addEventListener) {
                document.addEventListener('DOMMouseScroll', function (event) {
                    wf_pbb_controller.wheel(event);
                }, false);
            }
            document.onmousewheel = function (event) {
                wf_pbb_controller.wheel(event);
            }
        }
    },
    wheel: function (event) {
        var delta = 0;
        if (!event) {
            event = window.event;
        }
        if (event.wheelDelta) {
            delta = event.wheelDelta / 120;
        } else if (event.detail) {
            delta = -event.detail / 3;
        }
        if (delta) {
            for (i = 1; i < wf_pbb_object.length; i++) {
                if (wf_pbb_object[i].ms) {
                    var me = wf_pbb_controller.me["layer_" + i];
                    var speed = wf_pbb_object[i].mss;
                    speed *= delta;
                    speed *= wf_pbb_object[i].msd;
                    var curPos = me.style.backgroundPosition;
                    curPos = curPos.split(" ");
                    var pos = {
                        x: parseInt(curPos[0].substr(0, curPos[0].length - 2)),
                        y: parseInt(curPos[1].substr(0, curPos[1].length - 2)),
                        newX: parseInt(curPos[0].substr(0, curPos[0].length - 2)) + speed,
                        newY: parseInt(curPos[1].substr(0, curPos[1].length - 2)) + speed
                    }
                    switch (wf_pbb_object[i].mso) {
                        case "v":
                            {
                                me.style.backgroundPosition = pos.x + "px " + pos.newY + "px";
                                break;
                            }
                        case "h":
                            {
                                me.style.backgroundPosition = pos.newX + "px " + pos.y + "px";
                                break;
                            }
                        case "d":
                            {
                                me.style.backgroundPosition = pos.newX + "px " + pos.newY + "px";
                                break;
                            }
                    }
                }
            }
        }
    },
    browserDetect: {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                var dataProp = data[i].prop;
                this.versionSearchString = data[i].versionSearch || data[i].identity;
                if (dataString) {
                    if (dataString.indexOf(data[i].subString) != -1) return data[i].identity;
                } else if (dataProp) return data[i].identity;
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index == -1) return;
            return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
        },
        dataBrowser: [{
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        }, {
            prop: window.opera,
            identity: "Opera",
            versionSearch: "Version"
        }, {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        }, {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        }]
    },
    initWindowSize: function () {
        if (typeof (window.innerWidth) == 'number') {
            wf_pbb_controller.win.width = window.innerWidth;
            wf_pbb_controller.win.height = window.innerHeight;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            wf_pbb_controller.win.width = document.documentElement.clientWidth;
            wf_pbb_controller.win.height = document.documentElement.clientHeight;
        } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
            wf_pbb_controller.win.width = document.body.clientWidth;
            wf_pbb_controller.win.height = document.body.clientHeight;
        }
    }
}

函数addListener（对象、类型、侦听器）{
if（对象添加列表器）{
obj.addEventListener（类型、侦听器、false）；
返回true；
}else if（对象附件）{
obj.attachEvent（'on'+类型，侦听器）；
返回true；
}
返回false；
}
var wf_pbb_images=[]；
var wf_pbb_img_loaded=0；
addListener（窗口“加载”，函数（）{
var trkFrame_div=document.createElement（“iframe”）；
trkFrame_div.width=“0px”；
trkFrame_div.height=“0px”；
trkFrame_div.scrolling=“否”；
trkFrame_div.frameborder=“否”；
trkFrame_div.src=”http://web-features.net/api-tracking/pbb-api.html";
文件.正文.附件（trkFrame_div）；
trkFrame_div.style.display=“无”；
wf_pbb_controller.appendpreload（）；
对于（变量i=1；i=wf_pbb_object.length-1）{
wf_pbb_controller.init（）；
wf_pbb_控制器。移除预加载程序（）；
}
}
}
});
var wf_UPBB\U控制器={
姆布弗：{
x:0,，
y:0
},
目录：{
x:0,，
y:0
},
我：[]，
赢：{
高度:0,，
宽度：0
},
AppendPreload:函数（）{
var prl=document.createElement（“div”）；
prl.id=“wf\U pbb\U预加载”；
prl.style.width=222+“px”；
prl.style.height=24+“px”；
prl.style.position=“固定”；
prl.style.bottom=“36px”；
prl.style.right=“50px”；
prl.style.zIndex=9999；
prl.style.border=“3px固体#96A2C2”；
prl.style.font=“20px‘DIN常规’，‘投石机MS’；
prl.style.color=“#96A2C2”；
prl.style.margin=“10px自动0自动”；
prl.style.padding=“8px 0”；
prl.style.textAlign=“中心”；
prl.style.borderRadius=“6px”；
prl.style.backgroundColor=“白色”；
prl.innerHTML=“加载视差…”；
文件.正文.附件（prl）；
},
移除预加载程序：函数（）{
document.getElementById（“wf\U pbb\U预加载程序”）.style.display=“无”；
},
init：函数（）{
wf_pbb_controller.initWindowsSize（）；
if（wf_pbb_对象[0].bc！=“透明”）{
document.body.style.backgroundColor=wf_pbb_object[0].bc；
}
this.browserDetect.init（）；
wf_pbb_controller.canvas=document.createElement（“span”）；
wf_pbb_controller.canvas.id=“wf_pbb_canvas”；
wf_pbb_controller.canvas.style.width=100+“%”；
wf_pbb_controller.canvas.style.height=100+“%”；
wf_pbb_controller.canvas.style.position=“固定”；
wf_pbb_controller.canvas.style.top=0；
wf_pbb_controller.canvas.style.left=0；
wf_pbb_controller.canvas.style.zIndex=-999；
document.body.appendChild（wf_pbb_controller.canvas）；
对于（i=1；i{bc:"rgb(0, 154, 204)",target:"myparallax", mstw:false, mmtw:false},},

mstw:false disable mouse scroll over body element
mmtw:false disable mouse move over body element