ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
Check
in English

ਸਥਿਤੀ

ਕਿਸੇ ਤੱਤ ਦੀ ਸਥਿਤੀ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਕੌਂਫਿਗਰ ਕਰਨ ਲਈ ਇਹਨਾਂ ਸਹਾਇਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਸਥਿਰ ਸਿਖਰ

ਵਿਊਪੋਰਟ ਦੇ ਸਿਖਰ 'ਤੇ ਇੱਕ ਤੱਤ ਦੀ ਸਥਿਤੀ, ਕਿਨਾਰੇ ਤੋਂ ਕਿਨਾਰੇ ਤੱਕ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਥਿਰ ਸਥਿਤੀ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਸਮਝਦੇ ਹੋ; ਤੁਹਾਨੂੰ ਵਾਧੂ CSS ਜੋੜਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

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

ਸਥਿਰ ਥੱਲੇ

ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਾਂ, ਕਿਨਾਰੇ ਤੋਂ ਕਿਨਾਰੇ ਤੱਕ ਇੱਕ ਤੱਤ ਦੀ ਸਥਿਤੀ ਰੱਖੋ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਥਿਰ ਸਥਿਤੀ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਸਮਝਦੇ ਹੋ; ਤੁਹਾਨੂੰ ਵਾਧੂ CSS ਜੋੜਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

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

ਸਟਿੱਕੀ ਸਿਖਰ

ਵਿਊਪੋਰਟ ਦੇ ਸਿਖਰ 'ਤੇ ਇੱਕ ਤੱਤ ਦੀ ਸਥਿਤੀ, ਕਿਨਾਰੇ ਤੋਂ ਕਿਨਾਰੇ ਤੱਕ, ਪਰ ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ।

<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>
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>

ਸਟਿੱਕੀ ਥੱਲੇ

ਕਿਸੇ ਤੱਤ ਨੂੰ ਵਿਊਪੋਰਟ ਦੇ ਤਲ 'ਤੇ, ਕਿਨਾਰੇ ਤੋਂ ਕਿਨਾਰੇ ਤੱਕ ਰੱਖੋ, ਪਰ ਉਦੋਂ ਹੀ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ।

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

ਜਵਾਬਦੇਹ ਸਟਿੱਕੀ ਥੱਲੇ

.sticky-bottomਉਪਯੋਗਤਾ ਲਈ ਜਵਾਬਦੇਹ ਭਿੰਨਤਾਵਾਂ ਵੀ ਮੌਜੂਦ ਹਨ ।

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