Sticky-Posisjonering for Dynamiske Oppsett
Sticky-posisjonering kombinerer aspekter av både relativ og fast posisjonering. Når et element er posisjonert som sticky, vil det oppføre seg som et relativt posisjonert element inntil det når en viss terskel på siden. På dette tidspunktet vil det bytte til å oppføre seg som et fast element.
position: sticky;
Se følgende illustrasjon. Elementet med tekstinnholdet I am sticky har sticky-posisjonering.
Når et element befinner seg inne i en beholder, og beholderen forblir innenfor visningsområdet, vil elementet oppføre seg som om det var relativt posisjonert. Men når en del av foreldrebeholderen beveger seg ut av visningsområdet, blir elementet fast plassert så lenge en del av beholderen fortsatt er synlig på skjermen. Når hele beholderen forlater visningsområdet, aktiveres relativ posisjonering igjen, og elementet forsvinner fra visningen sammen med beholderen.
La oss øve litt og lage et par seksjoner med sticky-titler. På denne måten kan brukeren alltid se tittelen på den seksjonen han leser nå, og deretter skal den forsvinne ved scrolling.
index.html
index.css
Merk
Det er viktig å påpeke at vi må angi enten
topellerbottom-egenskapen, slik at nettleseren forstår hvor vi forventer at et element skal feste seg.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you show me an example of how to use sticky positioning with section titles?
What does the CSS look like for making section titles sticky?
Can you explain more about the importance of the `top` or `bottom` property with sticky positioning?
Awesome!
Completion rate improved to 2.04Sticky-Posisjonering for Dynamiske Oppsett
Sveip for å vise menyen
Sticky-posisjonering kombinerer aspekter av både relativ og fast posisjonering. Når et element er posisjonert som sticky, vil det oppføre seg som et relativt posisjonert element inntil det når en viss terskel på siden. På dette tidspunktet vil det bytte til å oppføre seg som et fast element.
position: sticky;
Se følgende illustrasjon. Elementet med tekstinnholdet I am sticky har sticky-posisjonering.
Når et element befinner seg inne i en beholder, og beholderen forblir innenfor visningsområdet, vil elementet oppføre seg som om det var relativt posisjonert. Men når en del av foreldrebeholderen beveger seg ut av visningsområdet, blir elementet fast plassert så lenge en del av beholderen fortsatt er synlig på skjermen. Når hele beholderen forlater visningsområdet, aktiveres relativ posisjonering igjen, og elementet forsvinner fra visningen sammen med beholderen.
La oss øve litt og lage et par seksjoner med sticky-titler. På denne måten kan brukeren alltid se tittelen på den seksjonen han leser nå, og deretter skal den forsvinne ved scrolling.
index.html
index.css
Merk
Det er viktig å påpeke at vi må angi enten
topellerbottom-egenskapen, slik at nettleseren forstår hvor vi forventer at et element skal feste seg.
Takk for tilbakemeldingene dine!
