web-dev-qa-db-fra.com

Position absolue minimale/maximale en CSS

Quelle est la meilleure approche pour restreindre la position d'un élément positionné de manière absolue, idéalement en CSS pur?

Je sais que ce qui suit n’est pas possible, mais je suppose que ce que je recherche ressemblerait à quelque chose comme: 

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

Cela permettrait à un élément de se déplacer à une position située à au moins 100 pixels du haut de son élément contenant et positionné.

Un exemple (et mon cas initial) d'utilisation de cela est un menu qui défile dans le cadre d'une page mais cesse de défiler lorsqu'il apparaît en haut d'une fenêtre. (Menus collants?) Dont un exemple peut être vu sur cette page: http://spektrummedia.com/startups

Je m'attends vraiment à ce que cela ne soit pas possible sans utiliser du Javascript, mais je pensais le publier.

javascriptjquerycsshtml5
14
Lewis

position: collant

Il y a eu discussions au W3C à ce sujet ces dernières années. Une proposition est l'ajout d'une valeur sticky pour la propriété position.

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

Cette fonctionnalité est actuellement prise en charge dans Chrome 23.0.1247.0 et ultérieure en tant que fonctionnalité expérimentale. Pour l'activer, saisissez about:flags pour l'adresse URL et appuyez sur entrée. Recherchez ensuite les "fonctionnalités expérimentales de WebKit" et basculez-les entre activé et désactivé.

Sur le site Web html5rocks , il y a une démo fonctionnelle.

À proprement parler, il s'agit d'une implémentation de contenu collant, et non d'un moyen générique de limiter la position minimale ou maximale d'un élément par rapport à un autre élément. Toutefois, le contenu persistant pourrait être la seule application pratique pour le type de comportement que vous décrivez.

10
Matt Coughlin

Comme il n’existe aucun moyen de le créer pour tous les principaux navigateurs sans utiliser JavasScript, j’ai créé ma propre solution avec jQuery:

Attribuez position:relative à votre sticky-top-menu . Quand il atteint le haut de la fenêtre du navigateur en faisant défiler la position, la position est modifiée à positon:fixed.

Indiquez également votre sticky-top-menu top:0 pour vous assurer qu'il reste en haut de la fenêtre de votre navigateur.

Vous trouvez ici un exemple de travail Exemple JSFiddle .

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%;
}
4
Philipp Hofmann

Une expression de requête multimédia qui définit la distance entre le corps 0X 0Y et la fenêtre de navigateur 0X 0Y permettrait de rendre les éléments collants après le défilement de la page.

À ma connaissance, aucune expression de ce type n’a été proposée et n’est supportée par aucun navigateur, mais il serait utile de permettre la configuration dynamique d’éléments persistants, tels que les barres de menus qui restent collantes après le défilement de la page, sans utilisation. de JavaScript.

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

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

À ma connaissance, il n’existe aucun moyen de restreindre un élément qui a été positionné en utilisant le positionnement absolu en utilisant uniquement le code CSS.

1
Tanner