スクロールダウン時のヘッダーを非表示にすると表示されます。

Question

固定ヘッダーと固定バナー付きの1ページのWebサイトがあります。私のヘッダーは、私が約ページで上にスクロールするときだけ表示されますが、私はさらにページを下にしても、ヘッダーはもう表示されません。 私のウェブサイトをご覧くださいhttp://l.esy.es/cmeniano/

Answer 1

あなたの質問を理解していれば、.nav-downクラスをスクロールしてヘッダーから削除すると、.nav-upクラスが追加されているためです。 .nav-upにはtop:-125pxというプロパティがあります。これがヘッダーを「隠す」原因となっています。

EDIT：

// 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; 
} 

だから、私はデルタを取り除かれ、ユーザがスクロールアップまたはダウンして、そのに基づいてされた場合にだけチェックすることによって、単純hasScrolled機能を作り、それが.nav-upかのどちらかを追加します.nav-down。

希望すると助かります！ :)

Answer 2

あなたのファイルにjqueryを含め、あなたのウェブページにこのコードを使用して、私はあなたのウェブサイトで火かき棒を使ってチェックしました。

$(window).scroll(function(e){ 
       var $el = $('header'); 

       if ($(this).scrollTop() > 200){ 
$('header').css({'display': 'none'}); 
       } 
       if ($(this).scrollTop() < 200) 
       { 
$('header').css({'display': 'block'}); 
       } 
      });  

あなたが探しているものが正確かはわかりませんが、これはあなたのベスト、幸運を助けてくれることを願っています。そうでない場合は、それをより明確にするようにしてください。そして私はあなたにもう一度お手伝いしようとします。