向下滚动时隐藏标题，向下滚动时显示 [英] Hide header when scroll down and show when down

问题描述

我有一个带有固定标题和固定横幅的 1 页网站.我的标题仅在我向上滚动关于页面时显示，但是当我进一步向下滚动关于页面时，标题将不再显示.请看看我的网站http://l.esy.es/cmeniano/

I have a 1 page website with fixed header and fixed banner. My header only shows when I scroll up at the about page but when im further down the about page the header wont show up anymore. please take a look at my website http://l.esy.es/cmeniano/

推荐答案

好吧，如果我理解您的问题，那是因为您在向下滚动并删除 .nav-up 类时添加了 .nav-up 类来自标题的 code>.nav-down 类.你的 .nav-up 有 top:-125px 属性.这就是导致您的标题被隐藏"的原因.

Well if I understood your question then it is because you are adding .nav-up class when you scroll down and removing the .nav-down class from the header. And your .nav-up has top:-125px property. This is what is causing your header to be "hidden".

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

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

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

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

    // 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){
       $('header').removeClass('nav-down').addClass('nav-up');
    } else {
      $('header').removeClass('nav-up').addClass('nav-down');
    }
    lastScrollTop = st;
}

所以，我去掉了 delta 并使 hasScrolled 函数更简单，只需检查用户是向上还是向下滚动，并在此基础上添加 .nav-up 或 .nav-down.

So, I stripped out the delta and made the hasScrolled function simpler by just checking if user is scrolling up or down and on basis of that, it will add either .nav-up or .nav-down.

希望有帮助！:)

这篇关于向下滚动时隐藏标题，向下滚动时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！