Position absolue minimum / maximum en CSS

Quelle est la meilleure approche pour réduire une position absolue de l'élément de poste, idéalement dans le plus pur CSS?

Je sais que la suite n'est pas possible, mais je crois que je suis à la recherche d'ressemblerait à quelque chose comme:

.stickyElement{
   bottom-max:auto;      
   bottom-min:0px;
   top-max: auto;
   top-min: 100px;
 }

Qui permettrait à un élément à déplacer à une position pas moins de 100px de haut de il du contenant, positionné sur l'élément.

Un exemple (et mon) cas d'utilisation de ce est un menu qui défile comme une partie d'une page, mais s'arrête de défiler quand il frappe le haut de la fenêtre d'affichage. (Collant menus?) un exemple de ce qui peut être vu sur cette page:
http://spektrummedia.com/startups

Je m'attends à ce que cela n'est pas possible sans l'aide de Javascript, mais j'ai pensé que je l'avais mis là-bas.

source d'informationauteur Lewis

  1. 9

    position: collant

    Il y a eu les discussions du W3C sur ce sujet au cours des dernières années. Une proposition est l'ajout d'un sticky de la valeur pour l' position propriété.

    .content {
    position: -webkit-sticky;
    position:    -moz-sticky;
    position:     -ms-sticky;
    position:      -o-sticky;
    position:         sticky;
    top: 10px;
}

    C'est actuellement pris en charge dans Chrome 23.0.1247.0 et plus tard comme une fonction expérimentale. Pour l'activer, entrez about:flags pour l'adresse URL et appuyez sur entrée. Ensuite, la recherche de "expérimental WebKit fonctionnalités" et basculer entre activé et désactivé.

    Sur le html5rocks site web, il y a un travail démo.

    Strictement parlant, c'est une mise en collant le contenu, et non pas d'un usage général, de façon à limiter au strict minimum ou maximum de la position d'un élément par rapport à un autre élément. Cependant, collant le contenu pourrait être la seule application pratique pour le type de comportement que vous décrivez.

  2. 4

    Comme il n'y a aucun moyen de le faire pour tous les principaux navigateurs, sans l'utilisation de JavasScript j'ai fait ma propre solution avec jQuery:

    Attribuer position:relative à votre collant-top-menu. Lorsqu'il atteint le haut de la fenêtre du navigateur par le biais de défilement de la position est changé à positon:fixed.

    Aussi donner votre collant-top-menu top:0 pour s'assurer qu'il colle en haut de la fenêtre de votre navigateur.

    Vous trouverez ici un travail JSFiddle Exemple.

    HTML

    <header>I'm the Header</header>
<div class="sticky-top-menu">
  <nav>
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
  </nav>
</div>
<div class="content">
  <p>Some content...</p>
</div>

    jQuery

    $(window).scroll(function () {
    var headerTop = $("header").offset().top + $("header").outerHeight();

    if ($(window).scrollTop() > headerTop) {
        //when the header reaches the top of the window change position to fixed
        $(".sticky-top-menu").css("position", "fixed");
    } else {
        //put position back to relative
        $(".sticky-top-menu").css("position", "relative");
    }
});

    CSS

    .sticky-top-menu {
    position:relative;
    top: 0px;
    width: 100%;
}
  3. 2

    Une demande de support à l'expression qui définit la distance entre le corps 0X 0Y et le navigateur de la fenêtre de 0X 0Y permettrait d'éléments pour être collante après la page défile

    Pas cette expression a été proposé et n'est pas pris en charge par n'importe quel navigateur, à ma connaissance, mais il serait utile d'expression pour permettre la configuration dynamique du collant des éléments, tels que les barres de menu qui sont collant après page défile passé de la tête, sans utiliser de JavaScript.

    .this element {
  position: absolute;
  top: 200px;
}

@media (max-scroll: 200px 0) {
  .this.element {
    position:fixed;
    top: 0;
  }
}
  4. 1

    À ma connaissance, il n'existe aucun moyen de restreindre un élément qui a été placé à l'aide de positionnement absolu, en utilisant uniquement CSS.