【发布时间】：2017-09-04 22:54:16
【问题描述】：
我想要一个能够逐渐将页面底部的不透明度从 0 更改为 1 的函数。
我在项目的顶部使用了类似的功能，但我使用淡入而不是淡入。创建它相当容易，但在设置阈值的页面底部淡入是一场噩梦。
经过研究，我发现可以使用以下方法在页面底部创建淡出：
var scrollBottom: (($(document).height() - $(window).height()) - $(window).scrollTop())
要设置阈值，我必须将“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 之前，用户无法突出显示底部的文本。我知道，没有人会尝试选择一些随机文本，但对我来说这是不专业。我做了同样的事情，但使用了两种不同的方法。我真的很想让我的代码更加一致。
所以这是我的问题：一个人能否实现与您在上面的示例中看到的相同的结果，但使用文本淡入而不是 div 淡出？
编辑：我看到（字面意思是几秒钟）一个陌生人的回复，他说pointer-events: none; 解决了无法选择 div @ 下的文本的问题987654330@。有用！现在我认为这是要走的路。我不知道，你为什么要删除你的回复。
【问题讨论】：