2016-05-23 70 views
0

我想創建一個固定的導航欄,當用戶滾動時變淡,並且變得不透明時,用戶不是,但我不知道如何觸發fadeTo命令時,他們有停止滾動。我玩過並搜索了.promise(),但我無法弄清楚確切的用法。我是JS/JQuery的新手,我正處在一個學校項目中。JQuery閃爍div?幫助使用.promise()

JQuery的:

$(window).scroll(function() { 
    $("#top").fadeTo(300, 0.5); 
    $("#top").fadeTo(300, 1); 
}); 

#top是導航欄。

任何幫助表示讚賞,並試圖解釋你的答案,因爲它可以幫助我學習。

謝謝,拉克蘭。

+2

http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling – thatOneGuy

回答

2

當鼠標滾動時,創建計時器,如果花費時間後頁面沒有滾動,則顯示目標元素。

var timer; 
 
$(window).scroll(function(){ 
 
    clearTimeout(timer); 
 
    timer = setTimeout(function(){ 
 
     $("#nav").fadeIn("fast"); 
 
    }, 500); 
 
    $("#nav").fadeOut("fast"); 
 
});
body { 
 
    height: 1000px; 
 
    position: relative; 
 
} 
 

 
#nav { 
 
    width: 100%; 
 
    height: 50px; 
 
    position: fixed; 
 
    top: 0px; 
 
    background: green; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav"></div>