在 div 中向下滾動時導致箭頭淡出

Question

當我向下滾動時，我試圖讓 V 形消失。 當我向下滾動 body 元素時，我可以讓它與以下代碼一起工作：

<script>    
    $(window).scroll(function(){
        $(".arrow").css("opacity", 1 - $(window).scrollTop() / 250);
      });
</script>

但是，人字形放置在一個長的 div 元素 ( id="scrollsnap-container" class="scrollsnap-container ) 內，我希望它在 div 中向下滾動時淡出（而不是 body 本身）。

我試過

$(document.getElementById('scrollsnap-container').scroll(function(){
        $(".arrow").css("opacity", 1 - $(document.getElementById('scrollsnap-container')).scrollTop() / 250);
      });

但我還沒有運氣。

Answer 1

你也可以用js實現結果

const element=document.querySelector('ELEMENT');

window.onscroll=function(){checking()}; 

function checking(){
element.style.opacity=Math.max(0,1-(window.scrollY/250))
}

Answer 2

事實證明我在錯誤的位置加載了 jquery（它是在這段代碼之后而不是之前）。 我使用的代碼有效：

$(document.getElementById('scrollsnap-container').scroll(function(){
        $(".arrow").css("opacity", 1 - $(document.getElementById('scrollsnap-container')).scrollTop() / 250);
      });

在正確的位置導入 jquery 解決了這個問題。