是否有方法使背景向下滚动，而某些内容始终停留在中间？

Question

我试图做( js，html，sass)这样的事情：

• 当我向下滚动页面时(地面，天空，空间，.)沿着

，

• ，我的内容(那将是一枚火箭在天空中)停留在屏幕的中央，然后移动到两边，就像它要飞(这是以后的)
• )，有些元素会在层上移动(比如小行星从右向左移动)(后来)

。

下面是我尝试过的代码的一些想法，但这看起来很奇怪，而且不像预期的那样工作。正如您所看到的，这些层正在按预期滚动，但它们并不是所有显示的原因，它们似乎填充了所有的页面大小，但它们不应该。我正在互联网上反复讨论这个问题，似乎没有人做过这样的事情。

​

// Functions
detectPageVerticalPosition = () => {
  pageVerticalPosition = pageYOffset;
};

getDivs = () => {
  for (
    let div = document.getElementsByTagName("div"), i = 0; i < div.length; i++
  ) {
    div[i].getAttribute("class") == "layer-vertical" &&
      layerVerticalArray.push(div[i]);
  }
  console.log("layerVerticalArray: ", layerVerticalArray);
};

moveLayers = () => {
  for (let i = 0; i < layerVerticalArray.length; i++) {
    layerVerticalArray[i].style.bottom = -1 * pageVerticalPosition + "px";
  }
};

// End Functions

// Variables
var pageVerticalPosition = 0,
  layerVerticalArray = new Array();
// End Variables

// Events
window.onload = e => {
  getDivs();
  // console.log(layerVerticalArray);
};

window.onscroll = e => {
  detectPageVerticalPosition();
  moveLayers();
};
// End Events

body {
  margin: 0;
}

#page {
  position: relative;
  height: 20000px;
  width: 100%;
}

#rocket-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#rocket-container #rocket {
  position: absolute;
  width: 100px;
  height: 100px;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

#background-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: red;
  overflow: hidden;
}

#background-container .layer-vertical {
  width: 100%;
  height: 3500px;
}

#background-container #layer-vertical-1 {
  position: absolute;
  background-color: blue;
}

#background-container #layer-vertical-1 #cloud-1 {
  outline-style: dashed;
  right: 0px;
}

#background-container #layer-vertical-1 #cloud-2 {
  outline-style: dotted;
  bottom: 0px;
}

#background-container #layer-vertical-2 {
  background-color: green;
}

#background-container #layer-vertical-3 {
  background-color: purple;
}

.cloud {
  position: absolute;
  width: 180px;
  height: 120px;
  background-image: url(../images/cloud.png);
}

<div class="page">
  <div class="background-container">
    <div class="layer-vertical" id="layer-vertical-1">
      Layer 1
      <div class="cloud" id="cloud-1"></div>
      <div class="cloud" id="cloud-2"></div>
    </div>
    <div class="layer-vertical" id="layer-vertical-2">
      Layer 2
    </div>
    <div class="layer-vertical" id="layer-vertical-3">
      Layer 3
    </div>
  </div>
  <div id="rocket-container">
    <div id="rocket">STAY MIDDLE</div>
  </div>
</div>

  [1]: [https://via.placeholder.com/180/120](https://via.placeholder.com/180/120)

​

Answer 1

所以，下面是我为解决这个问题而发现的(jsfiddle：http://jsfiddle.net/kjrte2sd/2/)

我使用一些jquery使后台容器按预期向下滚动，而不是每个元素单独滚动。现在页面div消失了，而主体处理整个事件的大小。

我想答案比我预期的要简单。

​

var winHeight = $(window).innerHeight();

$(document).ready(() => {
  $(".layer-vertical").height(winHeight);
  $("body").height(winHeight * $(".layer-vertical").length);
});

window.addEventListener("resize", e => {
  $(".layer-vertical").height($(window).innerHeight());
});

$(window).on("scroll", () => {
  $("#background-container").css("bottom", $(window).scrollTop() * -1);
});

body {
  margin: 0;
  padding: 0;
}

#rocket-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#rocket-container #rocket {
  position: absolute;
  width: 100px;
  height: 100px;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

#background-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

#background-container .layer-vertical {
  width: 100%;
}

#background-container .layer-vertical h1 {
  width: 100px;
  position: relative;
  display: block;
  margin: 0 auto;
  text-align: center;
  top: 50%;
}

#background-container #layer-vertical-1 {
  background-color: green;
}

#background-container #layer-vertical-2 {
  background-color: red;
}

#background-container #layer-vertical-3 {
  background-color: white;
}

#background-container #layer-vertical-4 {
  background-color: pink;
}

#background-container #layer-vertical-5 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="background-container">
  <div class="layer-vertical" id="layer-vertical-5">
    <h1>5</h1>
  </div>
  <div class="layer-vertical" id="layer-vertical-4">
    <h1>4</h1>
  </div>
  <div class="layer-vertical" id="layer-vertical-3">
    <h1>3</h1>
  </div>
  <div class="layer-vertical" id="layer-vertical-2">
    <h1>2</h1>
  </div>
  <div class="layer-vertical" id="layer-vertical-1">
    <h1>1</h1>
  </div>
</div>

<div id="rocket-container">
  <div id="rocket">STAY MIDDLE</div>
</div>

​