时间戳

首页 > 解决方案 > 有没有办法让背景向下滚动，而某些内容始终停留在中间？

javascript - 有没有办法让背景向下滚动，而某些内容始终停留在中间？

问题描述

我正在尝试做类似的事情（在 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

标签： javascripthtmlcsssass

解决方案

所以，这是我为了解决这个问题而发现的（jsfiddle：http: //jsfiddle.net/kjrte2sd/2/）

我使用一些 jquery 使背景容器按预期向下滚动，而不是每个元素自己向下滚动。现在页面 div 消失了，body 处理了整个事情的大小。

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

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>

推荐阅读