基於var值的jQuery過渡不透明度

Question

我正在嘗試基於視口高度內的滾動位置設置從0到1的不透明度值的動畫。 下面的代碼設置變量windowHeight和scrollTop ，其可以被組合以計算percentageScrolled視口的高度的（0-100）。 基於此，我可以在設定點切換CSS值，但我想逐漸將不透明度從0 percentageScrolled更改為percentScrolled的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，也請嘗試避免使用var。

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>