如何讓導航欄淡入淡出

Question

我想做一個導航欄，當用戶向下滾動頁面導航欄變得半透明，然後如果用戶鼠標懸停在導航欄上它會重複，然後再次出去，一旦他們將鼠標從物體上移開。我似乎無法解決如何：

獲取導航欄只在用戶向下滾動頁面後鼠標離開後淡入淡出 - 我不希望它們在屏幕頂部褪色在他們將鼠標移開之後，只有在頁面進一步向下時。 這樣做，如果它們在移動鼠標時緩慢淡出，而不是直接進入設置的不透明狀態。

$(window).scroll(function() { 
    if ($(window).scrollTop() > 75) { 
     $('#navBar').css("opacity", 0.3); 
    } 
    else { 
     $('#navBar').css("opacity", 1); 
    } 
}); 

    $(document).ready(function(){ 
     $('#navBar').live("mouseover", function() { 
       $(this).css("opacity", 1); 
       }); 

     $('#navBar').live("mouseleave", function() { 
       $(this).css("opacity", 0.3); 
       }); 

    }) 

Answer 1

$(window).scroll(function() { 
    if ($(window).scrollTop() > 75) { 
     $('#navBar').css("opacity", 0.3); 
    } 
    else { 
     $('#navBar').css("opacity", 1); 
    } 
}); 

$(document).ready(function(){ 
    $('#navBar').live("mouseover", function() { 
      $(this).css("opacity", 1); 
      }); 

    $('#navBar').live("mouseleave", function() { 
     if($(window).scrollTop() > 75) { // this here 
      $(this).css("opacity", 0.3); 
     } 
    }); 

}) 

運作的？

您可以添加到您的CSS，使其淡入/淡出逐漸：

#navBar { 
    transition: opacity 2s; 
} 

這樣，每次你改變的不透明度爲元素#navBar時間，不透明度的變化應該需要2秒。