Ano ang Webkit sticky?
Ano ang Webkit sticky?

Video: Ano ang Webkit sticky?

Video: Ano ang Webkit sticky?
Video: CSS Tutorial: Position absolute, relative, fixed and sticky in CSS | Web Development Tutorials #25 2024, Abril
Anonim

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.

Bukod dito, ano ang ginagawa ng malagkit na posisyon?

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).

Maaaring may magtanong din, 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.

pwede po bang gumamit ng position sticky?

Suporta sa Mga Browser Malagkit ang Posisyon ay sinusuportahan ng lahat ng pangunahing modernong browser, maliban sa lumang IE. Para sa mga Safari browser ka kalooban kailangang idagdag ang -webkit prefix.

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.

Inirerekumendang: