ਸਥਿਤੀ

ਸਥਿਰ ਸਿਖਰ

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

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

ਸਥਿਰ ਥੱਲੇ

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

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

ਸਟਿੱਕੀ ਸਿਖਰ

ਵਿਊਪੋਰਟ ਦੇ ਸਿਖਰ 'ਤੇ ਇੱਕ ਤੱਤ ਦੀ ਸਥਿਤੀ, ਕਿਨਾਰੇ ਤੋਂ ਕਿਨਾਰੇ ਤੱਕ, ਪਰ ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ। .sticky-topਸਹੂਲਤ CSS's ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ 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>