スクロール位置に基づいてサブヘッダーを表示/非表示にする

Question

質問：私は次のアニメーションを達成しようとしています：モバイルでページが読み込まれるとき、ID "サブヘッダー"ユーザーは、50px以上のページをスクロールして、サブヘッダーを隠すようにします。最後に60PXアップユーザーがスクロールであれば、いつでも私は、私は以下のコードを見ています何

を.SHOWするサブヘッダーたいページの中：ページはメニューが非表示になりますが、私は上にスクロールするとき、それは示しており、複数の隠しスクロールを止めてから

はJQuery：

var newScroll = 0; 

var subHeaderPosition = true; 

var currentScroll = 0; 

     $(window).scroll(function() { 

      currentScroll = $(window).scrollTop(); 

       if ($(window).width() < 779) { 

         if (currentScroll > 50 && subHeaderPosition) { 

          console.log("Current Scroll position: " + currentScroll); 

          console.log("Scroll should hide"); 

          $("#sub-header").hide(300); 

          subHeaderPosition = false; 

          newScroll = $(window).scrollTop(); 

          console.log("New Scroll position: " + newScroll); 

         } else if ((currentScroll - 60) < newScroll && !subHeaderPosition) { 

          console.log("Scroll position: " + currentScroll); 

          console.log("Scroll should show Sub-Header"); 

          $("#sub-header").show(300); 

          subHeaderPosition = true; 

          newScroll = $(window).scrollTop(); 

         } else { 

          newScroll = $(window).scrollTop(); 
         } 




       } 

      }); 

UPDATE：さらにいくつかのログを追加した後、私は今、私のnewscrollとcurrentscrollは常に正しい方向に私を指す同じ番号を終了していることを伝えることができます。私はそれを持っているか、誰かが私がすべての耳であると判断した場合、私は解決策を投稿します。

Answer 1

あなたは、私が表示/非表示時引数に問題があると思う問題

$(function(){ 

$(window).on('scroll', function(){ 

    if($(window).scrollTop() >= 50){ 
    $('header').addClass('hide'); 
} 
else if($(window).scrollTop() <= 60){ 
    $('header').removeClass('hide'); 
} 

}); 

}); 

https://jsfiddle.net/qummetov_/3hf1e350/

Answer 2

を固定するためにこれを使用することができます。そのため、非表示アクションは実行できますが、スクロールは実際には非同期に行います。

チェックアウトjsfiddle。

私はcanShowHeader変数でこの正しさをチェックしています。 私の場合は、偽のsetTimeoutを実行しているんだけど、あなたは、元のjquery hide/show caseを使用することができます。

例：

$("#book").show(300, function() { 
    canShowHeader = false; 
}); 

と

$("#book").hide(300, function() { 
    canShowHeader = true; 
}); 

はそれがお役に立てば幸いです...

Answer 3

を私は、クラスを一度削除して追加することしかできないので、@НиязиГумметовは言ったように、addClassとremoveClassの使用を考えています。このような

何か：

var newScroll = 0; 

var subHeaderPosition = true; 

var currentScroll = 0; 

$(window).scroll(function() { 

    currentScroll = $(window).scrollTop(); 


    if (currentScroll > 50 && subHeaderPosition) { 

    console.log("Current Scroll position: " + currentScroll); 

    console.log("Scroll should hide"); 

    $("#sub-header").removeClass("show"); 
    $("#sub-header").addClass("hide"); 

    subHeaderPosition = false; 

    newScroll = $(window).scrollTop(); 

    console.log("New Scroll position: " + newScroll); 

    } else if ((currentScroll - 60) < newScroll && !subHeaderPosition) { 

    console.log("Scroll position: " + currentScroll); 

    console.log("Scroll should show Sub-Header"); 

    $("#sub-header").addClass("show"); 


    subHeaderPosition = true; 

    newScroll = $(window).scrollTop(); 

    } else { 

    newScroll = $(window).scrollTop(); 
    } 


}); 

#sub-header { 
    margin-top: 500px; 
    transition: all .3s; 
    opacity: 1; 
    visibility: visible; 
} 
.hide { 
    opacity: 0; 
    visibility: hidden; 
} 
.show { 
    opacity: 1 !important; 
    visibility: visible !important; 
} 

それとも述べnicholaidesとしてUnderscore Throttleを抽出します。