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)');
    }
}

jQuery在顶部隐藏菜单背景

2 个答案: