JQuery выключен («прокрутка») не работает

Question

мы пытаемся реализовать простое меню потайного при прокрутке, и показывая назад, когда пользователь прекращает прокрутку, но .on('scroll') работает, но .off('scroll') не

$(document).on('scroll',hideMenu); 
$(document).off('scroll',showMenu) 
function hideMenu(){ 
    $('#home_menu').fadeOut(); 
} 
function showMenu(){ 
    $('#home_menu').fadeIn(); 
} 

что происходит? , когда мы начинаем прокрутки меню исчезает, но когда мы остановить прокрутку, она не выцветает это

Answer 1

Вы можете использовать setTimeout вместо этого, что будет отменена (очищается) каждый раз, когда есть свиток, и когда остановки прокрутки, сделать его выполнить showMenu:

var menuTimer; 
 
$(window).on("scroll", hideMenu); 
 

 
function hideMenu() 
 
{ 
 
    clearTimeout(menuTimer); 
 
    $('#home_menu').fadeOut(); 
 
    menuTimer = setTimeout(showMenu, 900); 
 
} 
 

 
function showMenu() 
 
{ 
 
    $('#home_menu').fadeIn(); 
 
}

body{padding-top:3em;font-family:Arial,Helverica,sans-serif} 
 
#home_menu{position:fixed;top:0;left:0;width:100%;padding:1em;background:#1b83db;color:#fff} 
 
p{margin-bottom:3em}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="home_menu">Menu</div> 
 

 
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>

Answer 2

Существует недоразумение:

.off("scroll")не означает, что обратный вызов должен быть вызван, когда заканчивается прокрутка .

Вместо этого отсоединить обратный вызов от события scroll.

Вы хотите вызвать обратный вызов при запуске прокрутки, вызвать его при завершении.

Существует много способов добиться этого.

Это мой подход (код самоуправления объяснения):

$(document).on('scroll',scrollStart); 

// A scroll has started 

function scrollStart() 
{ 
    var lastScrollY; 

    // record the position 

    lastScrollY = $(window).scrollTop(); 

    // hide the menu 

    hideMenu(); 

    // detach the event. We don't want the callback called again for now. 

    $(document).off('scroll',scrollStart); 

    // let the function scrollRunning be called after 1 sec 

    setTimeout(function() { scrollRunning(lastScrollY) }, 1000); 
} 

// A scroll is going on. Or maybe has ended 

function scrollRunning(lastScrollY) 
{ 
    var currentScrollY; 

    // current scroll position 

    currentScrollY = $(window).scrollTop(); 

    // did the position change ? Scroll is going on 
    // schedule scrollRunning to check again after 1 sec 

    if(lastScrollY != currentScrollY) // Scrolling is going on 
    { 
     lastScrollY = currentScrollY; 
     setTimeout(function() { scrollRunning(lastScrollY) }, 1000); 
    } 
    else // Scrolling has stopped. Show the menu and reattach the event 
    { 
     $(document).on('scroll',scrollStart); 
     showMenu(); 
    } 
}