Sticky als een Vast Lokaal?

0
32

Lemme instellen van de stage een beetje hier.

Heb je een website en, zoals de meeste, het rollen.

Deze website zal modals. U zult waarschijnlijk position: fixed de modale zodat het voorspelbaar geplaatst, ongeacht het scrollen. Het is mogelijk dat de modale zelf zal schuiven.

Let op de modal heeft een knop sluiten. We kunnen position: absolute dat in de rechterbovenhoek, maar als onze modale rollen, dat is een probleem.

We hebben verloren met de knop sluiten achter de schuiven.

Moet een baan voor meer position: fixed, toch? Niet echt, helaas, als er geen dergelijk ding zoals een lokale context voor position: fixed.

Nou… eigenlijk er een beetje (gek) is. Als de modale een soort van CSS transformatie op het (en is het misschien al als je het centrum met behulp van de ol’ left: 50%; transformatie: translateX(-50%); lukken) dan de vaste positie te sluiten-knop zal komen terug naar huis:

Maar… als de transformatie geholpen trek de knop sluiten weer op zijn plaats, je kunt zien dat het zich gedraagt als position: absolute en niet position: fixed. _(ツ)_/

Er is een mogelijkheid om hier, dat wel. Het idee is dat position: sticky is, in een zin, een lokaal bereik position: fixed. Als we de positie van de sluiten-knop aan de bovenkant: 0 hoe dan ook, het zal alleen maar houden er als de modale omlaag schuiven.

Ik dacht dat dit was een interessante mogelijkheid. Uiteindelijk, om eerlijk te zijn, als ik had modals ik me zorgen over te scrollen, ik zou waarschijnlijk als een .modal-kop-container .modal-inhoud container. De kop zou zitten op de top altijd en de container zou het ding dat kon schuiven.