Ano ang ginagawa ng malagkit na posisyon?
Ano ang ginagawa ng malagkit na posisyon?

Video: Ano ang ginagawa ng malagkit na posisyon?

Video: Ano ang ginagawa ng malagkit na posisyon?
Video: tips pag lunok ng semilya masama ba 2024, Mayo
Anonim

Isang elemento na may posisyon : malagkit ; ay nakaposisyon batay sa scroll ng user posisyon . A malagkit nagpapalipat-lipat ang elemento sa pagitan ng relative at fixed, depende sa scroll posisyon . Ito ay nakaposisyon na kamag-anak hanggang sa isang ibinigay na offset posisyon ay natutugunan sa viewport - pagkatapos ay "didikit" ito sa lugar (tulad ng posisyon :nakapirming).

Gayundin, paano ko gagawing malagkit ang aking posisyon?

Upang makita ang epekto ng malagkit na pagpoposisyon , Piliin ang posisyon : malagkit opsyon at i-scroll ang lalagyan na ito. Mag-i-scroll ang elemento kasama ang lalagyan nito, hanggang sa ito ay nasa tuktok ng lalagyan (o maabot ang offset na tinukoy sa itaas), at pagkatapos ay hihinto sa pag-scroll, upang manatiling nakikita ito.

Alamin din, ano ang pagkakaiba sa pagitan ng malagkit na posisyon at nakapirming? Nang hindi pumunta sa mga partikular na detalye, posisyon : malagkit karaniwang kumikilos tulad ng posisyon : kamag-anak hanggang sa ma-scroll ang isang elemento sa kabila ng isang partikular na offset, kung saan ito ay nagiging posisyon : nakapirming , na nagiging sanhi ng elemento na "dumikit" sa nito posisyon sa halip na ma-scroll out sa view.

Kaugnay nito, maaari ba akong gumamit ng malagkit na posisyon ng CSS?

CSS

posisyon : malagkit

ay suportado sa Firefox, Safari, at Chrome Canary (56+). Posisyon ng CSS : malagkit ay suportado sa Firefox, Safari, at Chrome Canary (56+).

Ano ang Webkit sticky?

posisyon : malagkit ay isang bagong paraan upang posisyon mga elemento at kapareho ng konsepto sa posisyon : nakapirming. Ang pagkakaiba ay ang isang elemento na may posisyon : malagkit kumikilos tulad ng posisyon : kamag-anak sa loob ng parent nito, hanggang sa maabot ang ibinigay na offset threshold sa viewport.

Inirerekumendang: