Défilement : comment corriger les titres

Question

Je crée un en-tête qui se fixera et restera en place une fois défilé jusqu'à un certain nombre de pixels.

Puis-je le faire en utilisant uniquement CSS et HTML ou ai-je également besoin de jquery ?

J'ai créé une démo pour que vous puissiez comprendre. Toute aide est la bienvenue!

http://jsfiddle.net/gxRC9/4/

body{
     margin:0px;
     padding:0px;
}
 .clear{
     clear:both;
}
 .container{
     height:2000px;
}
 .cover-photo-container{
     width:700px;
     height: 348px;
     margin-bottom: 20px;
     background-color:red;
}
 .small-box{
     width:163px;
     height:100px;
     border:1px solid blue;
     float:left;
}
 .sticky-header{
     width:700px;
     height:50px;
     background:orange;
     postion:fixed;
}

Answer 1

J'ai modifié la réponse de Coop. Veuillez vérifier l'exemple FIDDLE Voici mes modifications :

$(window).scroll(function(){
  if ($(window).scrollTop() >= 330) {
    $('.sticky-header').addClass('fixed');
   }
   else {
    $('.sticky-header').removeClass('fixed');
   }
});

Answer 2

Vous avez besoin de JS pour gérer les événements de défilement. La meilleure façon serait de définir une nouvelle classe CSS pour une position fixe qui sera attribuée au div concerné lors du défilement au-delà d'un certain point.

HTML

<div class="sticky"></div>

CSS

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; }

jQuery

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Exemple de violon : http://jsfiddle.net/gxRC9/501/

---

EDIT : exemple étendu

Vous pouvez utiliser offset().top si le point de déclenchement est inconnu mais doit se déclencher lorsque l'élément collant atteint le haut de l'écran.

var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

Exemple de violon étendu : http://jsfiddle.net/gxRC9/502/