Klibbig som en Lokal Fast?

0
27

Lemme in på scenen en bit här.

Du har en webbplats och, som mest, det rullar.

Denna webbplats kommer att ha modals. Du kommer förmodligen position: fixed modal så att det är förutsägbart placerad oavsett rullning. Det är möjligt modal själv kommer att rulla.

Märker modal har en stäng-knapp. Vi kan position: absolute att i det övre högra hörnet, men om våra modal rullar, det är ett problem.

Vi har tappat stäng-knappen bakom rullning.

Bör vara en uppgift för mer position: fixed, eller hur? Inte riktigt, tyvärr, eftersom det inte finns något sådant som en lokal kontext för position: fixed.

Tja… att det faktiskt kinda (konstigt). Om den modala har någon form av CSS förändra på det (och det kanske redan om du centrera den med ol’ vänster: 50%; transform: translateX(-50%), lurar) då den fasta position stäng-knappen kommer hem:

Men… som omvandlar hjälpte till att dra på knappen stäng på plats, kan du se det beter sig som position: absolute och inte position: fixed. _(ツ)_/

Det finns en möjlighet här, dock. Tanken är att position: sticky är, i en mening, en lokalt begränsad position: fixed. Om vi position på stäng-knappen på toppen: 0 hur som helst, det ska bara hålla det som de modala rullar ner.

Jag tänkte bara att det var en intressant möjlighet. Slutligen, för att vara ärlig, om jag hade modals jag orolig rullning, jag skulle nog vilja ha en .modal-header-container och en .modal-innehåll behållare. Huvudet skulle sitta på topp alltid och behållaren skulle vara något som kunde rulla.