Comment faire une barre de navigation qui disparaît pendant le défilement vers le bas, mais se montre en défilant vers le haut?

Je veux créer une barre de navigation qui disparaît lorsque l'utilisateur fait défiler la page, mais réapparaît lorsque l'utilisateur fait défiler en arrière. Un peu comme la barre de recherche qui est dans le mobile, chrome app. Personne ne sait comment le faire? Tout ce que j'ai jusqu'à présent est un simple div qui est fixé sur le dessus.

Voici un exemple - le navigtion apparaît uniquement lorsque l'utilisateur fait défiler jusqu'à un peu.

Ce javascript avez-vous essayé jusqu'à présent? Veuillez l'ajouter à la question.
tous les java que j'ai essayé jusqu'à présent a été supprimé malheureusement.
Voulez-vous la barre de navigation pour être cachée, sauf si l'utilisateur est déjà de retour au sommet de la page?
n'est pas le top...j'ai besoin d'agir comme un navigateur web google chrome sur l'iphone. vous faites défiler vers le haut juste un peu pour voir la navigation
je pense que si j'ai mis un exemple dans la question

OriginalL'auteur zachstarnes | 2013-06-16

  1. 9

    Prototype à l'aide de jQuery

    Ici est une façon de le faire.

    Suppose que cela votre HTML, en-tête fixe et une partie du contenu:

    <div class="header">The header or navigation elements go here...</div>
<div class="main">
    <p>Some content...</p>
</div>

    Votre CSS:

    .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 faire de ce lieu est comme suit:

    $(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;
});

    Démo violon: http://jsfiddle.net/audetwebdesign/Mar62/

    Comment Cela Fonctionne

    L'astuce consiste à calculer si votre sont le défilement vers le haut ou de défilement vers le bas. Vous pouvez le faire par le stockage de la valeur précédente de la .scrollTop position.

    Définir un anonyme, un objet JavaScript avec un seul membre pour stocker la valeur:

        {
        previousTop: 0
    }

    et de l'objet jQuery .scroll() fonction.

    Lorsque la fenêtre défile, obtenez le courant de la position supérieure de la fenêtre de la barre de défilement,

    puis de le comparer à la valeur précédente, puis afficher l'en-tête si
    défilement vers le haut ou le cacher si le défilement vers le bas.

    Après " afficher/masquer la décision, de mise à jour de la .previoustop avec le currentTop valeur.

    Aucun autre plug in requis. Vous pouvez fade in/out l'en-tête ou utilisez une autre animation au lieu d'un simple afficher/masquer.

    merci ça a fonctionné. Une question cependant, que si je voulais l'en-tête de disparaître après la hauteur de la div a été adoptée? Le problème que j'ai, c'est qu'il disparaît tout de suite et je suis parti avec un espace blanc. Je l'aurais jquery ajouter une classe ou un attribut après le défilement de la fenêtre atteint un certain point? Si oui, comment puis-je ajouter?
    Si votre tête a une hauteur fixe, il serait assez facile. Au lieu de currentTop < this.previousTop, vous pouvez tester currentTop - height-of-header < this.previousTop ou quelque chose comme ça. Je peux vérifier quand je serai de retour au bureau.
    ok merci. J'ai testé ce que vous avez écrit et il n'a pas l'air de fonctionner. Donc à peu près l'en-tête doit rester là où ses à-dire ne pas être fixe jusqu'à la hauteur de l'en-tête est passé...alors il devient fixe...je pense que
    J'ai ajouté une var headerHeight = 50; juste en dessous var currentTop = $(window).scrollTop(); et ensuite enveloppé l'existant si l'instruction dans un autre, de sorte que le défilement vers le haut/vers le bas masquer et montrer l'effet ne se déclenche une fois que vous avez défiler plus de l'en-tête de la hauteur. Voici un codepen codepen.io/patrickwc/stylo/jKlpr
    Excellente solution! J'ai modifié cette solution un peu pour créer une surface lisse disparition/apparition de l'effet: au lieu de $(".header").show() j'ai utilisé $(".header").css("opacity", "1"); , au lieu de $(".header").hide() j'ai utilisé $(".header").css("opacity", "0"); et enfin ajouté ce qui suit dans le fichier css: .header{ transition:0.7s; } Voici une démo: jsfiddle.net/o17z58of

    OriginalL'auteur Marc Audet

  2. 0

    vous voulez dire, comme g+ t-elle ?

    vous pouvez utiliser ce plugin ici ( https://github.com/brandonaaron/jquery-mousewheel ) pour détecter la roulette de la souris de l'événement et prendre des mesures fondées sur que

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

    il y a aussi une page de test ici

    pas vraiment. Je veux la navigation à disparaître lorsque l'utilisateur fait défiler vers le bas mais je veux qu'il réapparaît lorsque l'utilisateur fait défiler, juste un peu...pas tout le chemin vers le haut
    vous faites de la navigation div fixe et que vous utilisez jquery pour afficher() ou de masquer() de la div que tu veux, je l'ai fait moi-même un retour alors que tous vous avez besoin est cela la roulette de la souris plugin et le reste est de la simple logique...

    OriginalL'auteur Mihai Vilcu