jquery - 滚动时不透明度返回负值

Question

.overlay我有以下代码，当用户距离屏幕底部 100vh 时，它会尝试淡化 div 的不透明度。但是，当屏幕随着元素变高而改变宽度时，它不起作用，不透明度函数会生成一个负数。

if 语句逻辑没问题，就是 opacity 函数。有任何想法吗？

$(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>

标签： jqueryhtmlcss

Answer 1

$(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;
      }
    });
  }
});