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();

所以才使用这个值insted的的500px的

Answer 2

您可以使用下面的代码，可能会为你

jQuery(function() { 
    var getWindow = jQuery(window); 
    var windowHeight = getWindow.height(); 
    jQuery(window).scroll(function(){ 
    if(jQuery(window).scrollTop() > windowHeight){jQuery(".test").fadeIn(100);} 
    else{jQuery(".test").fadeOut(100);} 
    }); 
}); 

最好的运气工作:)

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>