如何设置平面样式，使其在滚动时不会移动？

如何解决如何设置平面样式，使其在滚动时不会移动？

我的网站上有一些webgl平面，并且我一直在尝试找出如何使它们在滚动时停止移动。它们上下移动，在您滚动时显示背景。以下是我一直尝试使用的CSS。我显然对此没有经验，因此将不胜感激。谢谢。

ratings[1]

window.addEventListener("load",function(){var e=new Curtains({container:"planes-canvas"}),t=document.getElementsByClassName("planes"),n=[];function o(e){var t=n[e];t.onReady(function(){t.planeResize()}).onRender(function(){t.uniforms.time.value++})}for(var r=0;r<t.length;r++){var a={vertexShader:"#ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  // default mandatory attributes\n  attribute vec3 aVertexPosition;\n  attribute vec2 aTextureCoord;\n\n  // those projection and model view matrices are generated by the library\n  // it will position and size our plane based on its HTML element CSS values\n  uniform mat4 uMVMatrix;\n  uniform mat4 uPMatrix;\n\n  // texture coord varying that will be passed to our fragment shader\n  varying vec2 vTextureCoord;\n\n  void main() {\n    // apply our vertex position based on the projection and model view matrices\n    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition,1.0);\n\n    // varying\n    // use texture matrix and original texture coords to generate accurate texture coords\n    vTextureCoord = aTextureCoord;\n  }",fragmentShader:"\n    #ifdef GL_ES\n    precision mediump float;\n    #endif\n\n    // get our varyings\n    varying vec3 vVertexPosition;\n    varying vec2 vTextureCoord;\n\n    // the uniform we declared inside our javascript\n    uniform float uTime;\n\n    // our texture sampler (default name,to use a different name please refer to the documentation)\n    uniform sampler2D planeTexture;\n\n\n    vec3 hueRotate(vec3 col,float hue) {\n        vec3 k = vec3(0.57735,0.57735,0.57735);\n        float cosAngle = cos(hue);\n        return col * cosAngle + cross(k,col) * sin(hue) + k * dot(k,col) * (1.0 - cosAngle);\n    }\n\n    vec3 saturate(vec3 rgb,float adjustment) {\n        vec3 W = vec3(0.2125,0.7154,0.0721);\n        vec3 intensity = vec3(dot(rgb,W));\n        return mix(intensity,rgb,adjustment);\n    }\n\n\n    void main() {\n        // get our texture coords\n        vec2 textureCoord = vTextureCoord;\n\n        // displace our pixels along both axis based on our time uniform and texture UVs\n        // this will create a kind of water surface effect\n        // try to comment a line or change the constants to see how it changes the effect\n        // reminder : textures coords are ranging from 0.0 to 1.0 on both axis\n        const float PI = 3.141592;\n\n        textureCoord.x += (\n\t\t\t\t\tsin(textureCoord.x * 12.0 + ((uTime * (PI / 15.0)) * 0.031))\n\t\t\t\t\t+ sin(textureCoord.y * 12.0 + ((uTime * (PI / 12.489)) * 0.047))\n\t\t\t\t\t) * 0.0050;\n\n\t\t\t\ttextureCoord.y += (\n\t\t\t\t\tsin(textureCoord.y * 8.0 + ((uTime * (PI / 12.023)) * 0.023))\n\t\t\t\t\t+ sin(textureCoord.x * 8.0 + ((uTime * (PI / 15.1254)) * 0.067))\n\t\t\t\t\t) * 0.0100;\n\n        vec4 color = texture2D(planeTexture,textureCoord);\n\n        // hue rotation from 0 to PI in 10 seconds\n        float hueRotation = cos(uTime / 600.0) * PI;\n        color.rgb = hueRotate(color.rgb,hueRotation);\n\n        // saturate\n        color.rgb = saturate(color.rgb,2.0);\n\n        gl_FragColor = color;\n    }\n",uniforms:{time:{name:"uTime",type:"1f",value:0}}},i=e.addplane(t[r],a);i&&(n.push(i),o(r))}});

.plane-wrapper {
    width: 100%;
    position: fixed;
}

@media screen and (max-width: 720px)
.plane-wrapper {
    width: 100%;
    float: none;
    margin-bottom: 10px;
}
    
.plane-inner {
    Box-sizing: border-Box;
}
    
.landscape-wrapper {
    position: relative;
    height: 0;
    width: 100%;
    overflow: hidden;
}
    
.landscape-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.portrait-wrapper {
    position: relative;
    height: 0;
    width: 40%;
    overflow: hidden;
}
    
.portrait-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
    
#planes-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.planes {
  background-color: #fff;
  margin: 0 auto;
}

/*** the images will define the height of our planes ***/
.planes img {
  display: block;
  width: 100%;
  height: auto;
  /* hide the original image */
  opacity: 0;
  background-color: #fff;
}

/*** set the width of our planes ***/

#portrait {
  width: 40%;
}

#landscape {
  width: 100vw;
}
    
/* Custom,iPhone Retina */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {
#portrait {
  width: 100vw;
  height: auto;
  }
}