Question

我正在尝试做类似的事情（在js，html，sass中）：

当我向下滚动页面时，我的图层（地面，天空，空间等）会下降
我的内容（将是一枚正在空中飞翔的火箭）停留在屏幕中间，并且会像要飞行一样向两侧移动（稍后再讲）
某些元素将在层上移动（例如小行星从右向左或其他方向移动）（稍后）

这是我尝试过的一些代码思想，但这似乎很奇怪，无法按预期工作；如您所见，各层正在按预期方式滚动，但由于某种原因它们并没有全部显示，它们似乎填满了所有页面的大小，但它们不应该，而且我正在Internet上四处转转，没有似乎有人做了这样的事情。

// 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>

有什么方法可以让背景始终向下滚动，同时某些内容始终停留在中间？

1 个答案: