函數運行良好,但我想在100vh滾動而不是500px滾動後淡出元素。javascript - 如何在100vh滾動後淡出一個類?
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() > 500){jQuery(".test").fadeIn(100);}
else{jQuery(".test").fadeOut(100);}});
函數運行良好,但我想在100vh滾動而不是500px滾動後淡出元素。javascript - 如何在100vh滾動後淡出一個類?
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() > 500){jQuery(".test").fadeIn(100);}
else{jQuery(".test").fadeOut(100);}});
100vh = $(window).height();
所以才使用這個值insted的的500px的
您可以使用下面的代碼,可能會爲你
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);}
});
});
最好的運氣工作:)
您可以使用$(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>
謝謝,工作完美! –