bonjour
je reviens vers vous car ce que j'ai fait ne me satisfait pas encore
le meilleur compromis que j'ai trouvé pour qu'en scrollant les deux fenetres sroll ensemble puis que celle de gauche reste a l'ecran du navigateur est align-self:flex-end avec bottom:0, avec l'inverse flex-start et top:0 c'est moins bien
les problemes:
- avec un scroll pour aller vers le bas la fenetre de gauche comme elle se positionne en bas si elle est moins haute que la hauteur de l'ecran, elle est est en bas au lieu d'etre en haut
- ensuite avec un scroll pour aller vers le haut la fenetre de droite si elle descend plus bas que celle de gauche elle remonte avant celle de gauche au lieu que les deux remontent ensemble
*je voudrais qu'avec un scroll pour aller vers le bas les deux fenetres qq soit leur taille descendent ensemble jusqu'a ce que le dernier element de celle de gauche apparaillent à l'ecran et que si lon continue le scroll seule celle de droite le continue, ensuite si l'on scroll vers le haut les deux remontent de suite ensemble jusqu'a ce que celle de gauche retrouve son etat initial et que si l'on continue ce scroll seule celle de droite continue
(comme facebook)
voici en gros mon code
.flex{
display:flex;
padding:1em 0
}
.content{
width:100%
}
.nav{
font-size:26px;
bottom:0;
width:15%;
padding:1.5em 0;
position:sticky;
position:-webkit-sticky;
align-self:flex-end;
-ms-flex-item-align:start;/*pour fixer internet explorer au top*/
margin-top:calc(22px + 2em)
}
.nav a{
display:block;
margin:0.7em 0
}
.txt{font-size:40px;}
<div class="flex">
<nav class="nav">
<a href="ayyo.htm">oo</a>
<a href="akmfk.htm">okmk</a>
<a href="weloalf.htm">welu</a>
<a href="weprf.htm">werf</a>
<a href="wodo.htm">wdo</a>
<a href="wdelf.htm">waldf</a>
<a href="xyakma.htm">xyma</a>
<a href="rywalf.htm">oywalf</a>
<a href="oartf.htm">oratf</a>
<a href="yyalvf.htm">ylvf</a>
<a href="yfldf.htm">yfldf</a>
<a href="ualara.htm">ualara</a>
<a href="kmfrf.htm">urkm</a>
<a href="kyakf.htm">uyakf</a>
<a href="kollf.htm">ukalî</a>
<a href="kutxyf.htm">uutxf</a>
<a href="lomaf.htm">Lmaf</a>
<a href="maoayf.htm">qayf</a>
<a href="maftyf.htm">qaflf</a>
<a href="mallam.htm">qala</a>
<a href="maraf.htm">qae</a>
<a href="ftef.htm">qeef</a>
<a href="mfzo.htm">qfzo</a>
<a href="fya.htm">fya</a>
<a href="paawf.htm">leawf</a>
<a href="ryalf.htm">aktf</a>
<a href="kaft.htm">kkft</a>
<a href="talf.htm">ktlî</a>
<a href="kfld.htm">kdyf</a>
<a href="kumf.htm">kumf</a>
<a href="mul.htm">oul</a>
<a href="ltouu.htm">oztu</a>
<a href="ulu.htm">olt</a></nav>
<div class="content"><div id="other"></div><div id="others"></div>
<div class="txt"><p>Lorem ipsum</p>
<p> dolor sit</p>
<p> amet,</p>
<p> consur adip</p>
<p>iscing</p>
<p> elit.</p>
<p> Aliquam </p>
<p>accumsan</p>
<p> urna est</p>
<p> id u</p>
<p>ltricies</p>
<p> lorem</p>
<p> fini</p>
<p>bus eget.</p>
<p> Pelle</p>
<p>ntesqu</p>
<p>e finibus</p>
<p> auc</p>
<p>tor lorem,</p>
<p> in eleifend nunc</p>
<p> interdum nec.</p>
<p> Sed sit amet</p>
<p> commodo v</p>
<p>elit.</p>
<p> Nul</p>
<p>la et laor</p>
<p>eet</p>
<p> lectus,</p>
<p> ac vestibu</p>
<p>lum magna.</p>
<p> Nulla facilisi.</p>
<p> Curabitur p</p>
<p>orttitor</p>
<p>et elit u</p>
<p>t condi</p>
<p>mentum.</p>
<p> Cras ni</p>
<p>si nisi, gra</p>
<p>vida ac laci</p>
<p>nia nec, elei</p>
<p>fend vel ligula.</p>
<p>Pell</p>
<p>entesque </p>
<p>at viverra pur</p>
<p>us, v</p>
<p>el viverra jus</p>
<p>to. Maece</p>
<p>nas non gravid</p>
<p>a velit, eg</p>
<p>et malesuada n</p>
<p>isl. Praesent i</p>
<p> semper ante, v</p>
<p>itae accumsan ex. S</p>
<p>ed sit amet do</p>
<p>lor tem</p>
<p>por, egestas lo</p>
<p>rem et, ulla</p>
<p>mcor</p>
<p>per tel</p>
<p>lus. Aene</p>
<p>an in port</p>
<p>titor justo. Eti</p>
<p>am vel dolor</p>
<p> quis libero </p>
<p>mattis bib</p>
<p>endum</p>
<p>. Pellentesque </p>
<p>bibendum, eros </p>
<p>ut dignissim ull</p>
<p>amcorper, purus </p>
<p>magna temp</p>
<p>us ipsum</p>
<p>, sed eleifend augue</p>
<p> arcu sit amet dolor</p>
<p>. Proin scel</p>
<p>erisque</p>
<p> nisi ac fauc</p>
<p>ibus </p>
<p>hendrerit. In at sem</p>
<p>a lectus dic</p>
<p>tum cond</p>
<p>imentum.</p>
<p>Morbi fermen</p>
<p>tum magn</p>
<p>a a eros egest</p>
<p>as auctor. Phase</p>
<p>llus et eli</p>
<p>t ullamcorper,</p></div></div></div>
