根據滾動位置顯示/隱藏子標題

Question

問題：我正在嘗試完成以下動畫：當頁面在移動設備上加載時，我想顯示ID為“ sub-header”的div，但是一旦用戶在頁面上向下滾動50px以上，我想.hide sub -標題。 最后，如果用戶在頁面上隨時都向上滾動60像素，則我希望子標題為.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();
                       }




               }

          });

更新：添加更多日志后，我現在可以告訴我，新聞滾動和當前滾動始終以相同的數字結尾，這為我指明了正確的方向。 一旦有解決方案，或者如果有人發現了，我都會發布解決方案。

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

我想隱藏/顯示時間參數有問題。 因此，盡管可以執行hide操作，但滾動實際上是異步進行的。

檢出jsfiddle 。

我正在使用canShowHeader變量檢查這種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;
}

或者只是提取尼古拉斯提到的下划線節氣門 。