ページスクロール/アイドルのスクロール時にトグルクラス

Question

基本的には、このコードを使用すると、下にスクロールするとヘッダーメニューが非表示になり、上にスクロールするとヘッダーメニューが再び表示されます。

私が必要とするのは、スクロールがアイドル状態になったときにヘッダーメニューを非表示にすることです。 3秒間アイドル状態にすると、ヘッダーメニューが表示され、ヘッダーメニューは表示されません。

$(".slides li").hover(function() { 
    $(this).find('.flex-caption').css({opacity: 1.0}); 
}, 
function() { 
    $(this).find('.flex-caption').css({opacity: 0.0}); 
}); 
$('#nav-toggle').on('click', function(e) { 
    $(this).toggleClass("active"); 
    $(".navmobile").slideToggle(); 
    e.preventDefault(); 
}); 
$(document).ready(function(){ 
    $(window).resize(function() { 
     if ($(window).width() >= 1303) { 
      $(".navmobile").hide(); 
      $("#nav-toggle").removeClass("active"); 
     } 
     else { 
      $("#nav-toggle").removeClass("active"); 
      $(".navmobile").hide(); 
     } 
    }); 
}); 
     // Hide Header on on scroll down 
var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = $('.navbar').outerHeight(); 
$(window).scroll(function(event){ 
    didScroll = true; 
}); 
setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    } 
}, 0); 
function hasScrolled() { 
    var st = $(this).scrollTop(); 
    // Make sure they scroll more than delta 
    if(Math.abs(lastScrollTop - st) <= delta) 
     return; 
    // 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 && st > navbarHeight){ 
     // Scroll Down 
     $('.navbar').removeClass('nav-down').addClass('nav-up'); 
    $("#nav-toggle").removeClass("active"); 
    $(".navmobile").hide(); 
    } else { 
     // Scroll Up 
     if(st + $(window).height() < $(document).height()) { 
      $('.navbar').removeClass('nav-up').addClass('nav-down'); 
} } 
    lastScrollTop = st; 
} 

Answer 1

はいくつかのクラスを削除するか、他のものを行うために3秒間のタイムアウトを設定します。ここでは

var timer; 

$(window).scroll(function(event){ 
    didScroll = true; 
    clearTimeout(timer); 

    timer = setTimeout(function() { 
     $('#myHeader').removeClass('idle-scroll'); 
    }, 3000); 
}); 

clearTimeoutは、以前のタイムアウトを停止し、新しいものを開始します。