Paano gumawa: Patikling na header habang nagsascroll

Pag-aaral kung paano gumawa ng patikling at sticky na header gamit ang CSS at JavaScript.

Subukan mo ang sarili

Lumikha ng patikling header habang nagsascroll

Unang hakbang - Magdagdag ng HTML:

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

Ikalawa na hakbang - Magdagdag ng CSS:

Itakda ang estilo ng header ng pahina; magdagdag ng position: sticky at itaas: 0, upang mapanatili ang header na nakapanggaling sa itaas habang ang pahina ay nagsascroll. 
.header {
  position: sticky;
  itaas: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

Subukan mo ang sarili

ang elemento ay itakda na position: sticky; pagkatapos nito, ang posisyon nito ay gagawing batay sa posisyon ng paggalaw ng user.

Ang sticky na elemento ay magbabago sa pagitan ng relative at fixed na lokasyon ayon sa posisyon ng paggalaw ng scrolling. Bago mapunta sa nakagawad na offset sa paningin, ito ay mananatili sa relative na lokasyon; pagkatapos na mapunta, ito ay magpapatigil sa posisyon na iyon (katulad ng position: fixed gaya nito).

Babala:Upang maisabatas ang sticky na lokasyon, dapat mong itakda nang kahit anong bilang ng position: itaas、kanan、pababa o kaliwa 其中之一。

相关页面

教程：CSS position