如何在使用jquery滾動窗口時顯示和隱藏元素

-3

我想在顯示邊界效果時向下滾動併到達所需的部分。當我離開該部分時，它會被隱藏。這可能使用jQuery嗎？如何在使用jquery滾動窗口時顯示和隱藏元素

2016-07-19 Manabendra Biswas

是的，它是可能的。你只需要編寫代碼來完成它。 http://api.jquery.com –

這可能有所幫助：http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery –

使用的$（document）。在（ '滾動'），就像這樣：

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<style> 
html,body { 
    height:101%; 
} 

#box-1 { 
    width:200px; 
    height:200px; 
    background-color:#333; 
} 

.border-1 { 
    border: 10px solid #696969; 
} 
</style> 
<body> 
<h1 id="myTarget">This is the desire section</h1> 
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p> 
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p> 
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p> 
<p>Lorem ipsum dolor amit. Lorem ipsum dolor amit. Lorem ipsum dolor amit. </p> 
<div id="box-1"></div> 

<script> 
$(document).on('scroll', function() { 
    var pos = $(this).scrollTop(); 
    if(pos >= $('#myTarget').offset().top){ 
     $("#box-1").addClass("border-1").show(); 
    } else { 
     $("#box-1").removeClass("border-1").hide(); 
    } 
}) 
</script> 
</body> 
</html>

來源

2016-07-19 15:27:57 GunWanderer

如何在使用jquery滾動窗口時顯示和隱藏元素

回答

相關問題