jQuery隱藏頂部菜單的背景

Question

我試圖在瀏覽器頂部刪除菜單的背景（僅限背景，而不是文本）。

例如，看看怎麼這個網站已經做了（向下滾動，然後回升至看到它的效果）：http://www.thoughtspot.com/

我的jsfiddle這裏：http://jsfiddle.net/s6mLJ/2266/

// Hide Header on on scroll down 
var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = $('header').outerHeight(); 

$(window).scroll(function(event){ 
didScroll = true; 
}); 

setInterval(function() { 
if (didScroll) { 
    hasScrolled(); 
    didScroll = false; 
} 
}, 600); 

function hasScrolled() { 
var st = $(this).scrollTop(); 

// Make sure they scroll more than delta 
if(Math.abs(lastScrollTop - st) <= delta) 
    return; 

// If they scrolled down and are past the navbar, add class .nav-up. 
// This is necessary so you never see what is "behind" the navbar. 
if (st > lastScrollTop && st > navbarHeight){ 
    // Scroll Down 
    $('header').removeClass('nav-down').addClass('nav-up'); 
} else { 
    // Scroll Up 
    if(st + $(window).height() < $(document).height()) { 
     $('header').removeClass('nav-up').addClass('nav-down'); 
    } 
} 

lastScrollTop = st; 
} 

感謝您的幫幫我！

Answer 1

在setInterval函數將這個

if ($(window).scrollTop() == 0) { 
    $('header').css('background-color','rgba(0,0,0,0)'); 
    } else { 
    $('header').css('background-color','rgba(29,31,35,0.92)'); 
} 

看到的jsfiddle：http://jsfiddle.net/s6mLJ/2310/

或：http://jsfiddle.net/s6mLJ/2311/多了幾分流暢的

Answer 2

嘗試

function hasScrolled() { 
    var st = $(this).scrollTop(); 

    // Make sure they scroll more than delta 
    if(Math.abs(lastScrollTop - st) <= delta) 
     return; 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (st > lastScrollTop && st > navbarHeight){ 

     // Scroll Down 
     $('header').removeClass('nav-down').addClass('nav-up'); 
    } else { 
     // Scroll Up 
     if(st + $(window).height() < $(document).height()) { 
      $('header').removeClass('nav-up').addClass('nav-down'); 
     } 
    } 

    lastScrollTop = st; 
    if($(window).scrollTop()==0){ 
     $('header').css('background-color', 'rgba(29,31,35,0)'); 
    } else { 
     $('header').css('background-color', 'rgba(29,31,35,0.92)'); 
    } 
}