gpt4 book ai didi

jquery - 在页面底部淡入(逐渐)

转载 作者:行者123 更新时间:2023-11-27 23:10:57 26 4
gpt4 key购买 nike

我想要一个可以逐渐将页面底部的不透明度从 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; 用 not 解决问题能够选择 div .cover 下的文本。有用!现在我认为这是要走的路。我不知道,为什么你删除了你的回复。

最佳答案

$(".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 来反转效果。

关于jquery - 在页面底部淡入(逐渐),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46038782/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com