web-dev-qa-db-fra.com

Comment simuler le comportement `` position: fixe '' sur la barre latérale alignée sur Flexbox

Comme il a déjà été répondu ( Comment puis-je avoir une position: fixe; comportement pour un élément de taille flexbox? ) les boîtes positionnées absolument/fixes sont retirées de la normale flux d'éléments alignés sur Flexbox. Mais comment puis-je au moins simuler position: fixed comportement de, disons, width: 300px; height: 100vw élément?

Voici une démo ( http://codepen.io/anon/pen/ZGmmzR ) de mise en page initiale avec barre latérale à gauche et bloc de contenu à droite. Je voudrais que nav agisse comme position: fixed élément suivant le défilement de l'utilisateur sur la page. Je sais comment le faire sans Flexbox. En premier lieu, je considérerais une solution CSS pure sans utiliser JavaScript. Je vous remercie!

html5css3layoutweb-deploymentflexbox
15
user3576508

Modifier:

Une solution qui semble en quelque sorte moins hacky pourrait être de fabriquer le conteneur (.wrapper) aussi haut que l'écran, et n'ajoute le défilement qu'au _ <section> élément:

.wrapper {
    display: flex;
    height: 100vh;
}

section {
    flex: 1 1 auto;
    overflow: auto;
}

http://codepen.io/Sphinxxxx/pen/WjwbEO

Réponse originale:

Vous pouvez simplement tout mettre à l'intérieur <nav> dans un wrapper (ici: nav-wrapper), puis corrigez ce wrapper:

...
.nav-wrapper {
    position: fixed;
    top: 0; left: 0;
}

<nav role="navigation">
    <div class="nav-wrapper">
        ...
    </div>
</nav>

http://codepen.io/anon/pen/PqXYGM

33
Sphinxxx