在向下滾動時增加div不透明度

Question

我已經研究了源代碼的丟失，但是對於我的問題沒有解決方案。我創建了一個div，其可見性隱藏在CSS源代碼中。我想從0.1的不透明度開始，當滾動到200和當位於300不透明度的滾動變爲1.

$(document).ready(function(){      
    $(window).scroll(function(){ 
     if ($(this).scrollTop() > 150) { 
      $('.fscrollonh').css({"opacity": "0.1", "visibility": "visible"}); 
      $('.fscrollonh').show(500); 
     } else { 
      $('.fscrollonh').hide(500); 
     } 
    }); 
}); 

Answer 1

我假設你正在尋找類似的東西？

$(document).ready(function(){      
 
    $(window).scroll(function(){ 
 
     let sT = $(window).scrollTop(); 
 
     $('.scrollonh').css({ 
 
     opacity: (sT < 201 ? 0 : (sT > 300 ? 1 : (sT - 200)/100)) 
 
     }) 
 
    }); 
 
});

body { 
 
    min-height: 200vh; 
 
} 
 
.scrollonh { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.\32 00pxmark, 
 
.\33 00pxmark { 
 
    margin-top: 200px; 
 
    height: 0; 
 
    overflow: visible; 
 
    border-top: 1px solid red; 
 
} 
 
.\33 00pxmark { 
 
    margin-top: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="scrollonh">I fade on scroll</div> 
 
<div class="200pxmark">200px mark</div> 
 
<div class="300pxmark">300px mark</div>

Answer 2

試試這個。它根據一個函數計算不透明度並計算滾動

$(document).ready(function(){      
    $(window).scroll(function(){ 
     var scrollval = $(this).scrollTop(); 
     if (scrollval > 150) { 
      $('.fscrollonh').css({"visibility": "visible"}); 
      $('.fscrollonh').show(500); 
      $('.fscrollonh').css({ 
       opacity: function() { 
       var opacity = (150 * .006) + 0.1; 
       return opacity; 
       } 
       }); 
     } 
    else { 
      $('.fscrollonh').hide(500); 
     } 
    }); 
}); 

雖然我還沒有嘗試過，

Hopt this helps。