Au dessus d'une certaine valeur, div = fixed.. ?

Hello world!

Nous pouvons voir de temps en temps sur le web certains éléments, qui lorsque l'on scroll vers le bas montent (logique), mais un fois atteint le top de la page, devienne soudainement fixed.

Jusqu'à ce que l'on remonte, ils se dé-fixed lorsqu'ils atteignent leur place originale.

Une idée de la façon de s'y prendre ?

En espérant que ça reste du css, mais dans le cas contraire je suis quand même preneur

Un grand merci !

Je pense que c'est fait à l'aide de Javascript. Dès que l'utilisateur scroll, on calcule si l’élément est toujours visible dans le viewport (offset en JS je crois), sinon on le déplace (on change de classe, par exemple en position fixed comme tu le précise).

J'aimerais bien connaitre une solution full css également, mais je doute que ce soit possible.

Mouais je m'en doutais un peu .. Je n'ai aucune idée du comment faire en javascript (en rien d'ailleurs )

google "element visible viewport"

http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

Modifié par nonoteam (08 Mar 2012 - 20:38)

Si il devient fixed après un offset (sortie de l'écran je présume), comment peut il être visible ? Et si il réagit au premier pixel offset, il y a un rognage ?

N'y aurait il pas moyen de connaitre le top d'un élément même si celui ci est en relative (et donc n'a pas de top proprement dit vu qu'il est positionné dans le flux) et d'écrire que quand celui est à 0 ou en dessous après un scrool, il devient fixed ?

Je vais poser la question dans la section js, je crois qu'il serait plus à sa place..