如何向下滚动文本？

Question

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

像这样：NamingContainer property

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是更新后的小提琴。

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