在页面底部淡入（逐渐）

Question

我想要一个逐渐将页面底部的不透明度从 0 更改为 1 的函数。

我在项目的顶部使用了类似的功能，但我使用的不是淡入，而是淡出。创建它相当容易，但在页面底部设置阈值淡入是一场噩梦。

经过研究，我发现可以使用以下方法在页面底部创建淡出效果：

var scrollBottom: (($(document).height() - $(window).height()) - $(window).scrollTop())

要设置阈值，我必须按数字 divide "scrollBottom"。一切正常，但无论如何，我无法将淡出更改为淡入。我试图玩颜色而不是不透明度。将文本从白色更改为黑色会给我完全相同的结果，但我无法将 "scrollBottom" 中的单独值分配给特定颜色并逐渐更改它。

经过多次尝试，我想出了一个解决方案，我将淡出效果保留在页面底部，但不是淡出文本，而是淡出一个 div 的纯色文本层上方的颜色。它有效，但我不高兴你无法突出显示文本直到不透明度为 0，我可以将我的 div 的 display: 设置为 none;

代码如下：

$(window).on("scroll", function() {

  $(".h-work").css("opacity", 1 - $(window).scrollTop() / 320);
  if ($(window).scrollTop() >= 320) {
    $(".h-work").hide();
  } else {
    $(".h-work").show();
  }

  var t = 320;
  var sb = (($(document).height() - $(window).height()) - $(window).scrollTop());
  var f = sb / t;
  $(".hide").css("opacity", f);

  if (sb >= 320) {
    $(".h-work-bottom").hide();
  } else {
    $(".h-work-bottom").show();
  }

  if (f <= 0) {
    $(".hide").hide();
  } else {
    $(".hide").show();
  }

});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

body {
  height: 400%;
  width: 100%;
}

.wrap-fixed-real {
  height: 100vh;
  width: 100%;
  position: fixed;
}

.h-work {
  display: flex;
  opacity: 1;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.h-work-bottom {
  display: flex;
  opacity: 1;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

h1 {
  position: relative;
  padding: 0px 48px;
  width: 100%;
  max-width: 640px;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 26px;
  text-align: left;
  line-height: 34px;
  color: #000000;
}

.hide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="wrap-fixed-real h-work">
    <h1>Scroll down</h1>
  </div>
  <div class="wrap-fixed-real h-work-bottom">
    <h1>
      <div class="hide"></div>More, even worse projects to come.</h1>
  </div>
</body>

</html>

如您所见，在 var f 达到 0 之前，用户无法突出显示底部的文本。我知道，没有人会尝试 select 一些随机文本，但对我来说这并不专业。我做了同样的事情，但使用了两种不同的方法。我真的很想让我的代码更加一致。

所以这是我的问题：一个人能否获得与您在上面的示例中看到的相同的结果，但使用文本淡入而不是 div 淡出？

编辑： 我看到（几秒钟）一个陌生人的回复，他说 pointer-events: none; 解决了问题select div下的正文.cover。有用！现在我认为这是要走的路。我不知道，为什么你把你的回复删了。

Answer 1

您不需要额外的 div 元素。只需在 var f = sb / t; 之后添加行 f = 1-f;。看看：

$(window).on("scroll", function() {

  $(".h-work").css("opacity", 1 - $(window).scrollTop() / 320);
  if ($(window).scrollTop() >= 320) {
    $(".h-work").hide();
  } else {
    $(".h-work").show();
  }

  var t = 320;
  var sb = (($(document).height() - $(window).height()) - $(window).scrollTop());
  var f = sb / t;
  f = 1-f;
  $(".h-work-bottom h1").css("opacity", f);

  if (sb >= 320) {
    $(".h-work-bottom").hide();
  } else {
    $(".h-work-bottom").show();
  }

});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

body {
  height: 400%;
  width: 100%;
}

.wrap-fixed-real {
  height: 100vh;
  width: 100%;
  position: fixed;
}

.h-work {
  display: flex;
  opacity: 1;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.h-work-bottom {
  display: flex;
  opacity: 1;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

h1 {
  position: relative;
  padding: 0px 48px;
  width: 100%;
  max-width: 640px;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 26px;
  text-align: left;
  line-height: 34px;
  color: #000000;
  background: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-fixed-real h-work">
  <h1>Scroll down</h1>
</div>
<div class="wrap-fixed-real h-work-bottom">
  <h1>
    More, even worse projects to come.</h1>
</div>

Answer 2

$(".h-work-bottom").hide();
$(window).on("scroll", function() {

  $(".h-work").css("opacity", 1 - $(window).scrollTop() / 320);
  if ($(window).scrollTop() >= 320) {
    $(".h-work").hide();
  } else {
    $(".h-work").show();
  }

  var t = 320;
  var sb = (($(document).height() - $(window).height()) - $(window).scrollTop());
  var f = sb / t;

  if (sb >= 320) {
    $(".h-work-bottom").hide();
  } else {
    $(".h-work-bottom").css("opacity", 1 - f);
    $(".h-work-bottom").show();
  }

  if (f <= 0) {
    $(".hide").hide();
  } else {
    $(".hide").show();
  }

});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

body {
  height: 400%;
  width: 100%;
}

.wrap-fixed-real {
  height: 100vh;
  width: 100%;
  position: fixed;
}

.h-work {
  display: flex;
  opacity: 1;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.h-work-bottom {
  display: flex;
  opacity: 1;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

h1 {
  position: relative;
  padding: 0px 48px;
  width: 100%;
  max-width: 640px;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  font-size: 26px;
  text-align: left;
  line-height: 34px;
  color: #000000;
}

.hide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="wrap-fixed-real h-work">
    <h1>Scroll down</h1>
  </div>
  <div class="wrap-fixed-real h-work-bottom">
    <h1>
      More, even worse projects to come.</h1>
  </div>
</body>

</html>

您的主要问题是您的 H1 和 div.hide 没有正确关闭，并且您在宽度为 0 的元素中有一个绝对位置元素。

实际上我已经成功地删除了 .hide 元素，并保留了与顶部一样的标记。完成所有这些后，底部逐渐淡出而不是淡入。我不得不将 f 减去 1 而不是使用 f 来反转效果。

在页面底部淡入（逐渐）

Fade-in (gradually) at the bottom of the page

html

css

jquery

fadein