javascript - 如何在100vh滚动后淡出一个类？

Question

功能运行良好，但我希望在100vh滚动后淡出元素而不是500px滚动。

jQuery(window).scroll(function(){
    if(jQuery(window).scrollTop() > 500 ){jQuery(".test").fadeIn( 100 );}
    else{jQuery(".test").fadeOut( 100 );}});

Answer 1

100vh = $( window ).height();

所以只需使用此值为500px

的值

Answer 2

您可以使用以下代码，可能适用于您

{{1}}

祝你好运：）

Answer 3

您可以使用$(window).height()作为100vh的近似值。

工作示例：

$(document).ready(function(){

    $(window).scroll(function(){

        if ($(window).scrollTop() > $(window).height()) {
            $('div').fadeIn(100);
        }
    
        else {
            $('div').fadeOut(100);
        }
    });
});

body {
height: 200vh;
}

div {
position: relative;
top: 150vh;
left: 0;
width: 100px;
height: 100px;
background-color: rgb(255,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<main>
<div></div>
</main>