Redimensionner et redimensionner la fenêtre Javascript

Question

J'ai une classe div nommée navbar que je veux fader lorsque la page défile 700px vers le bas. Cependant, lorsque la largeur de la page est inférieure à 600px, je ne veux pas qu'elle apparaisse. Des idées?

$(window).addEventListener('onresize',function(){ 
$(window).scroll(function (e) { 
e.preventDefault(); 
    if ($(this).scrollTop() > 700 & window.innerWidth > 600) { 
    $('.navbar').fadeIn(); 
    } 
    else { 
    $('.navbar').fadeOut(); 
    } 
}); 
}); 

Answer 1

Vous n'avez pas besoin d'ajouter auditeur à « onresize », le window.innerWidth est dynamique de sorte qu'il sera varie sur Redimensionner.

$(window).scroll(function (e) { 
    e.preventDefault(); 
    if ($(this).scrollTop() > 700 && window.innerWidth > 600) { 
     $('.navbar').fadeIn(); 
    } 
    else { 
     $('.navbar').fadeOut(); 
    } 
}); 

ou vous pouvez peut-être séparer en deux dans le cas où vous redimensionnez sans défilement.

function listener (e) { 
    e.preventDefault(); 
    if ($(window).scrollTop() > 700 && window.innerWidth > 600) { 
     $('.navbar').fadeIn(); 
    } 
    else { 
     $('.navbar').fadeOut(); 
    } 
} 
$(window).scroll(listener); 
$(window).resize(listener);