我有以下代码,当用户离屏幕底部100vh时,它试图淡化div .overlay
的不透明度。但是,当屏幕随着元素变高而改变宽度时,它不起作用,不透明度函数会生成一个负数。
if语句逻辑很好,它是不透明度函数。有什么想法吗?
$(window).scroll(function() {
// Start to adjust footer opacity at 100vh
if ($(window).scrollTop() + $(window).height() >= $(document).height() - $(window).height()) {
var scrollTop = $(this).scrollTop();
$('.overlay').css({
opacity: function() {
var elementHeight = $(this).height();
return 1 + (elementHeight - scrollTop) / elementHeight;
}
});
} else {
$('.overlay').css({
opacity: function() {
return 1;
}
});
}
});
header {
background: blue;
}
main {
background: white;
}
footer {
background: blue;
position: relative;
}
header,
main,
footer {
min-height: 100vh;
}
.overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: #000;
}
.add-height{
min-height: 1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<main>
<div class="add-height">Hello</div>
</main>
<footer id="footer">
<div class="overlay"></div>
</footer>
答案 0 :(得分:0)
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height() - $(window).height()) {
var opacity = ($(document).height() - $(window).scrollTop()) / $(window).height() - 1;
$('.overlay').css({
opacity: function() {
return opacity;
}
});
}
});