/ / Ako simulovať správanie na pozícii: fixné 'na bočnom paneli zarovnanom na Flexbox - html5, css3, rozloženie, nasadenie na webe, flexbox

Ako simulovať chovanie "pozície: fixné" na bočnom paneli zarovnanom na Flexbox - html5, css3, layout, nasadenie na webe, flexbox

Ako už bolo odpovedané (Ako môžem získať pozíciu: opravené; správanie prvku s veľkosťou flexboxu?) absolútne / pevne umiestnené polohovacie krabice sa vyberú z normálneho prietoku elementov vyrovnaných Flexboxom. Ale ako môžem aspoň simulovať? position: fixed správanie, povedzme, width: 300px; height: 100vw element?

Tu je demo (http://codepen.io/anon/pen/ZGmmzR) počiatočného rozloženia s bočným panelom vľavo a obsahom vpravo. rád by som nav hrať ako position: fixed prvok, ktorý nasleduje po prehliadke používateľa v celej stránke.Viem, ako to urobiť bez Flexboxu.V prvom rade by som považoval čisté CSS riešenie bez použitia JavaScriptu.

odpovede:

23 pre odpoveď č. 1

edit:

Riešenie, ktoré sa akosi cíti byť menej šialené, môže byť vytvorenie kontajnera (.wrapper), ako je obrazovka, a iba pridať posúvanie do hlavného menu <section> element:

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

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

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

Pôvodná odpoveď:

Môžete jednoducho dať všetko do vnútra <nav> v obale (tu: nav-wrapper) a potom opravte tento obal:

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

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

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