If 语句在 jquery 中不起作用（window.scrollY）

Question

我使用vanilla javascript创建了一个函数，当滚动一定数量的像素时，该函数使一段文本不可见，但是当我尝试在jquery javascript中重写它时，它不起作用 - 我实际上没有得到任何错误，它只是没有做它应该做的事情

这是有效的普通代码：

document.addEventListener('DOMContentLoaded', function() {

    window.addEventListener('scroll', homeTransition);

    function homeTransition() {
        const home = document.querySelector(".home");
        const homeHeight = home.clientHeight;
        if (window.scrollY >= homeHeight * 0.85) {
            home.classList.add("invisible");
        } else {
            home.classList.remove("invisible");
        }    
    };
});

这是jquery代码：

const doc = $(document); 
const win = $(window); 

doc.ready(function() {
    win.scroll(function homeTransition() {
        const home = $(".home"); 
        if (win.scrollY >= home.clientHeight * 0.85) {
            home.css("opacity", "0");
        } else {
            home.css("opacity", "1");
        }    
    });
});

我认为问题出在 if 语句的 if 部分，大概是 win.scrollY 但我不知道 - 我注意到 window.scrollTo() 在我的 jquery 中工作正常，所以我尝试更改所有组合中 win 到 window 的每个实例，但它不会改变任何东西

相关html：

<article class="home">
    <p>Placeholder Text Placeholder Text Placeholder Text Placeholder Text 
    Placeholder Text Placeholder Text Placeholder Text Placeholder Text 
    Placeholder Text</p>
</article>            

相关CSS：

.home {
    display: flex; 
    align-items: center;
    flex-direction: column;
    position: sticky;
    top: 25.5em;
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

.home p {
    font-size: var(--title-size);
    color: var(--text-color);
    font-weight: 600;
    text-align: center;
    max-width: 50em;
    text-transform: uppercase;
    padding: 0.5rem; 
    letter-spacing: 0.1em;
    line-height: 2;
}

Answer 1

解决方案只是将 win.scrollY 替换为 window.scrollY 并将 home.clientHeight 替换为 home.innerHeight()