Collant la Tête à la suite de défilement vers le bas

Voici un début. Fondamentalement, nous copier l'en-tête de la charge, puis de vérifier (à l'aide de .scrollTop() ou window.scrollY) à voir lorsque l'utilisateur fait défiler au-delà d'un point (par exemple, 200pixels). Il nous suffit alors de basculer d'une classe (dans ce cas .down) qui se déplace à l'original en vue.

Enfin tout ce que nous devons faire est d'appliquer une transition: top 0.2s ease-in à notre clone, de sorte que quand il est dans la .down état, il se glisse dans la vue. Trempé t-il mieux, mais avec un peu de jeu autour, il est facile de configurer

CSS

header {
  position: relative;
  width: 100%;
  height: 60px;
}

header.clone {
  position: fixed;
  top: -65px;
  left: 0;
  right: 0;
  z-index: 999;
  transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  top: 0;
}

soit Vanille JS (polyfill nécessaire)

var sticky = {
  sticky_after: 200,
  init: function() {
    this.header = document.getElementsByTagName("header")[0];
    this.clone = this.header.cloneNode(true);
    this.clone.classList.add("clone");
    this.header.insertBefore(this.clone);
    this.scroll();
    this.events();
  },

  scroll: function() {
    if(window.scrollY > this.sticky_after) {
      document.body.classList.add("down");
    }
    else {
      document.body.classList.remove("down");
    }
  },

  events: function() {
    window.addEventListener("scroll", this.scroll.bind(this));
  }
};

document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

ou jQuery

$(document).ready(function() {
  var $header = $("header"),
      $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
  });
});

---

Plus Récentes Réflexions

Tandis que les réponses ci-dessus, l'OP question d'origine de "Comment Trempé obtenir cet effet?", Je ne recommanderais pas cette approche. Pour commencer, la copie de l'ensemble de la barre de navigation peut être assez coûteux, et il n'y a aucune raison pourquoi nous ne pouvons pas utiliser l'original (avec un peu de travail).

En outre, Paul Irlandais et d'autres, ont écrit à propos de comment animer avec translate() est mieux que de l'animation avec des top. Non seulement est-il plus performant, mais cela signifie également que vous n'avez pas besoin de connaître la taille exacte de votre élément. La solution ci-dessus sera modifiée avec la suite de (Voir JSFiddle):

header.clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: 0.2s transform cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  transform: translateY(0);
}

Le seul inconvénient avec l'aide de transformations est que, si prise en charge du navigateur est très bonne, vous voudrez probablement ajouter vendeur préfixé versions pour optimiser la compatibilité.

Ici, c'est tout à fait une liste de plugins jQuery qui aideront à atteindre l'effet similaire: http://jquery-plugins.net/tag/sticky-scroll

Je suggère l'utilisation de collants js c'est avoir la meilleure option que j'ai vu. rien à faire, juste à cette annonce js sur vous

 https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js

et l'utilisation de code ci-dessous :

<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

Son repo git: https://github.com/garand/sticky

Ajouter de l'anti-rebond, pour l'efficacité http://davidwalsh.name/javascript-debounce-function

Ce n'était pas de travail pour moi dans Firefox.

Nous avons ajouté une condition selon que le code impose le dépassement de capacité au niveau de html. Voir Animer scrollTop ne fonctionne pas sous firefox.

  var $header = $("#header #menu-wrap-left"),
  $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = Array(); 
    fromTop["body"] = $("body").scrollTop();
    fromTop["html"] = $("body,html").scrollTop();

if (fromTop["body"]) 
    $('body').toggleClass("down", (fromTop["body"] > 650));

if (fromTop["html"]) 
    $('body,html').toggleClass("down", (fromTop["html"] > 650));

  });