javascript - 基于 var 值的 Jquery 转换不透明度

Question

我正在尝试根据视口(viewport)高度内的滚动位置将不透明度值设置为从 0 到 1 的动画。下面的代码为 windowHeight 和 scrollTop 设置了变量，它们可以结合起来计算视口(viewport)高度的 percentageScrolled (0–100)。基于此，我能够在设定点切换 CSS 值，但我想逐渐改变 percentageScrolled 的不透明度从 0–100。

我如何调整下面的代码来过渡/动画不透明度？

谢谢。

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

    // Vars
    var windowHeight = $(window).height();
    var scrollTop = $(this).scrollTop();
    var percentageScrolled = (scrollTop*100)/windowHeight;

    if( percentageScrolled < 100 ) {
        $('.colour-overlay').css('opacity', '1');
    } else {
        $('.colour-overlay').css('opacity', '0');
    }

});

Answer 1

您可以删除 if 并将不透明度设置为百分比除以 100

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

  // Vars
  var windowHeight = $(window).height();
  var scrollTop = $(this).scrollTop();
  $('.colour-overlay').css('opacity', scrollTop / windowHeight);

});

.colour-overlay {
  display: block;
  width: 20px;
  height: 1200px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="colour-overlay"></div>