Есть ли способ сделать фоновую прокрутку вниз, пока какой-то контент все время остается посередине?

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

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>