Показать/скрыть заголовок на основе положения прокрутки

Question

Вопрос: Я пытаюсь выполнить следующую анимацию: когда страница загружается на мобильном устройстве, я хочу показать div с идентификатором «sub-header», но как только пользователь прокручивает более 50 пикселей вниз по странице, которую я хочу .hide sub-header. Наконец, если пользователь прокручивает вверх 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; 
} 

Или просто извлечь Underscore Throttle как nicholaides упоминалось.