淡入/淡出導航欄
[英]Fade in/Fade out navigation bar
問題描述
我正在嘗試設置我的導航欄以保持固定並在我向下滾動時向下滾動並返回到其正常位置和不透明度時淡入0.8不透明度。
我的jquery代碼是：
jQuery(document).ready(function(){
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500,0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500,1);
}
});
});
我的css代碼是：
.fixed {
position:fixed;
top:0;
}
當我向下滾動時，它會逐漸消失，但當我向上滾動時，它不會恢復到原來的不透明度。我是jQuery的新手。
2 個解決方案
解決方案1
1 已采納 2015-07-31 18:05:12
我認為問題是你在每次觸發scroll事件時都設置了fadeTo函數。 因此，當您向下滾動時，您將向動畫效果隊列添加許多“淡出”調用。 向后滾動時，所有“淡出”效果（每個效果需要1.5秒）必須在第一次“淡入”調用發生之前完成。
您可以通過添加對jQuery的.stop(true)的調用來解決此問題，以便每個滾動事件都清除動畫隊列：
jQuery(document).ready(function() { var navOffset = jQuery("nav").offset().top; jQuery(window).scroll(function() { var scrollPos = jQuery(window).scrollTop(); jQuery("nav").stop(true); if (scrollPos > navOffset) { jQuery("nav").addClass("fixed"); jQuery("nav").fadeTo(1500, 0.5); } else { jQuery("nav").removeClass("fixed"); jQuery("nav").fadeTo(1500, 1.0); } }); });
body { height: 4096px; padding-top: 32px; } nav { height: 128px; width: 100%; border: 1px solid black; background-color: #00aa00; } .fixed { position: fixed; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>so</title> <meta charset="UTF-8"> </head> <body> <nav></nav> </body> </html>
請注意，這意味着在用戶停止滾動之前不會進行fadeTo動畫。
解決方案2
0 2015-07-31 17:07:19
還有另一個解決方案嗎？ 因為當我向后滾動時，“fadeTo”動作被延遲（約4秒），我不認為這是正常的。
修復了導航欄淡入/淡出問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.