Klibbig Positionering för Dynamiska Layouter
Klistrig positionering kombinerar aspekter av både relativ och fast positionering. När ett element är positionerat som sticky, beter det sig som ett relativt positionerat element tills det når en viss tröskel på sidan. Vid denna punkt byter det till att agera som ett fast element.
position: sticky;
Följande illustration visar detta. Elementet med textinnehållet I am sticky har klistrig positionering.
När ett element befinner sig i en behållare, och behållaren förblir inom vyfönstret, beter sig elementet som om det vore relativt positionerat. Men när en del av föräldrabehållaren lämnar vyfönstret, blir elementet fast placerat så länge någon del av behållaren fortfarande syns på skärmen. När hela behållaren har lämnat vyfönstret återaktiveras relativ positionering, och elementet försvinner från vyn tillsammans med behållaren.
Låt oss öva och skapa ett par sektioner med klistriga rubriker. På så sätt kan användaren alltid se rubriken för den sektion som läses för tillfället, och sedan ska den försvinna vid scrollning.
index.html
index.css
Obs
Det är viktigt att nämna att vi måste ange egenskapen
topellerbottom, så att webbläsaren förstår var vi förväntar oss att ett element ska fästa.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.04Klibbig Positionering för Dynamiska Layouter
Svep för att visa menyn
Klistrig positionering kombinerar aspekter av både relativ och fast positionering. När ett element är positionerat som sticky, beter det sig som ett relativt positionerat element tills det når en viss tröskel på sidan. Vid denna punkt byter det till att agera som ett fast element.
position: sticky;
Följande illustration visar detta. Elementet med textinnehållet I am sticky har klistrig positionering.
När ett element befinner sig i en behållare, och behållaren förblir inom vyfönstret, beter sig elementet som om det vore relativt positionerat. Men när en del av föräldrabehållaren lämnar vyfönstret, blir elementet fast placerat så länge någon del av behållaren fortfarande syns på skärmen. När hela behållaren har lämnat vyfönstret återaktiveras relativ positionering, och elementet försvinner från vyn tillsammans med behållaren.
Låt oss öva och skapa ett par sektioner med klistriga rubriker. På så sätt kan användaren alltid se rubriken för den sektion som läses för tillfället, och sedan ska den försvinna vid scrollning.
index.html
index.css
Obs
Det är viktigt att nämna att vi måste ange egenskapen
topellerbottom, så att webbläsaren förstår var vi förväntar oss att ett element ska fästa.
Tack för dina kommentarer!
