在向下滚动时增加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。