jQuery Girl
  1. jQuery Girl
  3. Comment faire une navigation qui disparaît en faisant défiler vers le bas mais apparaît en défilant vers le haut?
Intereting Posts
Ajout dynamic d’éléments à jQuery Mobile ListView Appel jQuery Ajax au service WCF renvoyant «Méthode non autorisée (405)» Validation de date .NET avec jQuery Accéder aux données d’un DataTable à partir d’un clic de bouton dans une ligne Liaison de données Ajax à l’aide de Knockout Js setInterval et setTimeout Comment créer des div dynamicment dans JQuery? Obtenir l’index dans le modèle jQuery Pourquoi jQuery perd ‘événement’ (clic) quand du contenu a été chargé? Utiliser correctement la valeur de retour de JSON dans le script jQuery.Ajax Paramétrer un cookie pour ne montrer qu’une seule fois le popup Sélection des colonnes du tableau (jQuery) Réinitialisation du plugin jQuery après la mise à jour de page AJAX jQuery AddClass puis suppression d’une classe Arrêtez le chargement des images sur un événement hashchange via JavaScript ou jQuery

Comment faire une navigation qui disparaît en faisant défiler vers le bas mais apparaît en défilant vers le haut?

Je souhaite créer une barre de navigation qui disparaît lorsque l’utilisateur fait défiler la page vers le bas, mais réapparaît lorsque l’utilisateur fait défiler vers le haut. Un peu comme la barre de recherche qui se trouve dans l’application chrome mobile. Est-ce que quelqu’un sait comment faire? Tout ce que j’ai jusqu’à présent, c’est une simple div qui est fixée au sumt.

Voici un exemple – la navigation n’apparaît que lorsque l’utilisateur fait défiler un petit peu vers le haut.

Prototype utilisant jQuery

Voici une façon de procéder.

Supposons que votre HTML, votre en-tête fixe et du contenu: 

The header or navigation elements go here...
 
 
Some content...

Votre CSS pourrait être: 

 .header { position: fixed; top: 0px; left: 9px; right: 9px; height: 50px; border: 1px dotted blue; background-color: rgba(125, 125, 125, 0.5); } .main { margin-top: 60px; border: 1px solid blue; width: 25%; }

Le jQuery pour y arriver est le suivant: 

 $(window).scroll( { previousTop: 0 }, function () { var currentTop = $(window).scrollTop(); if (currentTop < this.previousTop) { $(".sidebar em").text("Up"); /* optional for demo */ $(".header").show(); } else { $(".sidebar em").text("Down"); $(".header").hide(); } this.previousTop = currentTop; });

Violon de démonstration: http://jsfiddle.net/audetwebdesign/Mar62/

Comment ça marche

L'astuce consiste à calculer si vous faites défiler vers le haut ou vers le bas. Vous pouvez le faire en stockant la valeur précédente de la position .scrollTop .

Définissez un object JavaScript anonyme avec un seul membre pour stocker la valeur: 

  { previousTop: 0 }

et passez cet object à la fonction jQuery .scroll() .

Lorsque la fenêtre défile, obtenez la position supérieure actuelle de la barre de défilement de la fenêtre,
puis comparez-le à la valeur précédente, puis affichez l'en-tête si vous faites défiler vers le haut ou masquez-le si vous faites défiler vers le bas.

Après la décision d’ .previoustop / masquage, mettez à jour le .previoustop avec la valeur currentTop .

Aucun autre plug in requirejs. Vous pouvez ouvrir / fermer en fondu l'en-tête ou utiliser une autre animation au lieu d'un simple afficher / masquer.

tu veux dire comme g + le fait?

vous pouvez utiliser ce plugin ici ( https://github.com/brandonaaron/jquery-mousewheel ) pour détecter l’événement mousewheel et prendre des mesures en conséquence. 

 $('#my_elem').mousewheel(function(event, delta, deltaX, deltaY) { console.log(delta, deltaX, deltaY); });

il y a aussi une page de test ici