Sticky-sijoittelu Dynaamisiin Asetteluihin
Sticky-asemointi yhdistää sekä suhteellisen että kiinteän asemoinnin ominaisuuksia. Kun elementti asetetaan sticky-asemointiin, se käyttäytyy kuin suhteellisesti asemoitu elementti, kunnes se saavuttaa tietyn kynnyksen sivulla. Tämän jälkeen se vaihtaa käyttäytymään kuin kiinteästi asemoitu elementti.
position: sticky;
Tarkastellaan seuraavaa havainnollistusta. Elementti, jonka tekstisisältö on I am sticky, käyttää sticky-asemointia.
Kun elementti on säiliön sisällä ja säiliö pysyy näkymäalueella, elementti käyttäytyy kuin suhteellisesti asemoitu. Kun osa vanhemmasäiliöstä poistuu näkymäalueelta, elementti kiinnittyy paikalleen niin kauan kuin osa säiliöstä on edelleen näkyvissä. Kun koko säiliö poistuu näkymäalueelta, suhteellinen asemointi aktivoituu uudelleen ja elementti katoaa näkyvistä säiliön mukana.
Harjoitellaan seuraavaksi ja luodaan muutama osio, joilla on sticky-otsikot. Näin käyttäjä näkee aina sen osion otsikon, jota hän parhaillaan lukee, ja otsikon on tarkoitus kadota vierityksen myötä.
index.html
index.css
Huomio
On tärkeää mainita, että meidän täytyy määrittää
toptaibottom-ominaisuus, jotta selain ymmärtää, mihin kohtaan haluamme elementin kiinnittyvän.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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-sijoittelu Dynaamisiin Asetteluihin
Pyyhkäise näyttääksesi valikon
Sticky-asemointi yhdistää sekä suhteellisen että kiinteän asemoinnin ominaisuuksia. Kun elementti asetetaan sticky-asemointiin, se käyttäytyy kuin suhteellisesti asemoitu elementti, kunnes se saavuttaa tietyn kynnyksen sivulla. Tämän jälkeen se vaihtaa käyttäytymään kuin kiinteästi asemoitu elementti.
position: sticky;
Tarkastellaan seuraavaa havainnollistusta. Elementti, jonka tekstisisältö on I am sticky, käyttää sticky-asemointia.
Kun elementti on säiliön sisällä ja säiliö pysyy näkymäalueella, elementti käyttäytyy kuin suhteellisesti asemoitu. Kun osa vanhemmasäiliöstä poistuu näkymäalueelta, elementti kiinnittyy paikalleen niin kauan kuin osa säiliöstä on edelleen näkyvissä. Kun koko säiliö poistuu näkymäalueelta, suhteellinen asemointi aktivoituu uudelleen ja elementti katoaa näkyvistä säiliön mukana.
Harjoitellaan seuraavaksi ja luodaan muutama osio, joilla on sticky-otsikot. Näin käyttäjä näkee aina sen osion otsikon, jota hän parhaillaan lukee, ja otsikon on tarkoitus kadota vierityksen myötä.
index.html
index.css
Huomio
On tärkeää mainita, että meidän täytyy määrittää
toptaibottom-ominaisuus, jotta selain ymmärtää, mihin kohtaan haluamme elementin kiinnittyvän.
Kiitos palautteestasi!
