javascript - 向下滚动时如何向上移动文本？

Question

我是 jQuery 的新手，我需要帮助。当您向下滚动网站时，我想让文本向上移动并且静态框慢慢消失。

是这样的:http://eliastinchon.com/

p,
body {
  margin: 0;
  padding: 0;
}
body {
  height: 3000px;
  font-family: sans-serif;
  background-color: #282828;
}
#slide {
  color: #ffffff;
  font-weight: 600;
  font-size: 80px;
  position: absolute;
  top: 180px;
  left: 40px;
  z-index: 10;
}
#static {
  width: 400px;
  height: 200px;
  background-color: orange;
  float: right;
  margin-top: 150px;
  margin-right: 80px;
  color: #ffffff;
  text-align: right;
  font-size: 12px;
}

<div id="box">
  <p id="slide">Some text</p>
  <!-- This slideUp when scrolling down -->
  <div id="static">This box is static</div>

Answer 1

这种方法怎么样:

$(document).on('scroll', function() {
    $("#slide").css("top", Math.max(180 - 0.2*window.scrollY, 0) + "px");
    $("#static").css("opacity", Math.max(1 - 0.004*window.scrollY, 0));
})

Here是更新后的 Fiddle。

如果您不喜欢线性过渡，我当然会建议更改函数。