Question

我正在尝试基于视口高度内的滚动位置设置从0到1的不透明度值的动画。下面的代码为windowHeight和scrollTop设置了变量，可以将它们组合起来以计算视口高度的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

$(‘.colour-overlay’).css(opacity, percentageScrolled / 100);

代替if else语句。同样作为一般建议，请尝试避免使用var，而应使用const或let代替，如果您的项目不依赖于jquery，也请尝试避免使用它。

const overlays = document.querySelectorAll(‘.colour-overlay’);
window.addEventListener('scroll', () => {

    const windowHeight = window.offsetHeight;
    const scrollTop = window.scrollTop;
    const percentageScrolled = (scrollTop * 100) / windowHeight;

    for (const overlay of overlays) {
        overlay.style.opacity = percentageScrolled / 100;
    }

});

这将是纯js解决方案。

Answer 2

您可以删除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>

Answer 3

不知道我是否理解正确，但是写了一个例子看看。

$(document).on('scroll', function(){

    // Vars
  // use body instead of window, body will return the right height where window will return the view size
    var windowHeight = $("body").height(); 
    var scrollTop = $(this).scrollTop();
var percentageScrolled = Math.abs((((scrollTop / windowHeight) * 100) / 100 ));
  $('.colour-overlay').css('opacity', percentageScrolled);

});

.colour-overlay{
background:red;
height:1000px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="colour-overlay"></div>

基于var值的jQuery转换不透明度

3 个答案: