സ്ഥാനം

ഫിക്സഡ് ടോപ്പ്

വ്യൂപോർട്ടിന്റെ മുകളിൽ, അരികിൽ നിന്ന് അരികിലേക്ക് ഒരു ഘടകം സ്ഥാപിക്കുക. നിങ്ങളുടെ പ്രോജക്റ്റിലെ സ്ഥിരമായ സ്ഥാനത്തിന്റെ അനന്തരഫലങ്ങൾ നിങ്ങൾ മനസ്സിലാക്കുന്നുവെന്ന് ഉറപ്പാക്കുക; നിങ്ങൾക്ക് അധിക CSS ചേർക്കേണ്ടി വന്നേക്കാം.

<div class="fixed-top">...</div>

അടിവശം ഉറപ്പിച്ചു

വ്യൂപോർട്ടിന്റെ അടിയിൽ, അരികിൽ നിന്ന് അരികിലേക്ക് ഒരു ഘടകം സ്ഥാപിക്കുക. നിങ്ങളുടെ പ്രോജക്റ്റിലെ സ്ഥിരമായ സ്ഥാനത്തിന്റെ അനന്തരഫലങ്ങൾ നിങ്ങൾ മനസ്സിലാക്കുന്നുവെന്ന് ഉറപ്പാക്കുക; നിങ്ങൾക്ക് അധിക CSS ചേർക്കേണ്ടി വന്നേക്കാം.

<div class="fixed-bottom">...</div>

ഒട്ടിപ്പിടിച്ച മുകൾഭാഗം

വ്യൂപോർട്ടിന്റെ മുകളിൽ, അരികിൽ നിന്ന് അരികിലേക്ക് ഒരു ഘടകം സ്ഥാപിക്കുക, എന്നാൽ നിങ്ങൾ അത് സ്ക്രോൾ ചെയ്തതിന് ശേഷം മാത്രം. എല്ലാ ബ്രൗസറുകളിലും പൂർണ്ണമായി പിന്തുണയ്‌ക്കാത്ത .sticky-topCSS-കൾ യൂട്ടിലിറ്റി ഉപയോഗിക്കുന്നു .position: sticky

<div class="sticky-top">...</div>

പ്രതികരിക്കുന്ന സ്റ്റിക്കി ടോപ്പ്

.sticky-topയൂട്ടിലിറ്റിക്ക് റെസ്പോൺസീവ് വ്യതിയാനങ്ങളും നിലവിലുണ്ട് .

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>