ਕਿਵੇਂ ਬਣਾਓ: ਸਟੀਕੀ ਅਣੂਰਧਰਣ

CSS ਦੀ ਮਦਦ ਨਾਲ ਸਟੀਕੀ ਅਣੂਰਧਰਣ ਤਿਆਰ ਕਰਨ ਨੂੰ ਸਿੱਖੋ。

ਸਵੈ ਸਿਖਲਾਈ ਦੇਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਧਿਆਨ:ਇਹ ਉਦਾਹਰਣ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਜਾਂ ਐਜ਼ਡ 15 ਅਤੇ ਘੱਟ ਤੋਂ ਪਹਿਲਾਂ ਬਣਨ ਵਾਲੇ ਵਰਜਨਾਂ ਨੂੰ ਲਾਗੂ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ。

ਸਟੀਕੀ ਅਣੂਰਧਰਣ

ਉਦਾਹਰਣ

div.sticky {
  position: -webkit-sticky; /* ਸਫਾਰੀ */
  position: sticky;
  top: 0;
}

ਸਵੈ ਸਿਖਲਾਈ ਦੇਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

position: sticky; ਦੇ ਵਰਤੋਂ ਨਾਲ ਵੱਲੋਂ ਸਥਾਨਾਂ ਨੂੰ ਸਥਾਨਾਂ 'ਤੇ ਲੋਕੇਸ਼ਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਸਟੀਕੀ ਅਣੂਰਧਰਣ ਰਿਲੇਟਿਵ ਲੋਕੇਸ਼ਨ ਅਤੇ ਫਿਕਸਡ ਲੋਕੇਸ਼ਨ ਵਿੱਚ ਤਬਦੀਲ ਹੁੰਦੇ ਹਨ, ਜਿਸ ਨੂੰ ਸਰੋਤ ਸਥਿਤੀ ਨਾਲ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਸਰੋਤ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਹੋਣ ਵਾਲੀ ਸਥਿਤੀ ਤੱਕ ਇਹ ਰਿਲੇਟਿਵ ਲੋਕੇਸ਼ਨ ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ, ਫਿਰ ਉਹ ਉਸ ਸਥਾਨ 'ਤੇ 'ਸਟੀਕੀ' ਹੋ ਜਾਂਦਾ ਹੈ (ਵੈਂਡਸ਼ਨ: position:fixed)。

ਧਿਆਨ:ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ, ਐਜ਼ਡ 15 ਅਤੇ ਘੱਟ ਤੋਂ ਪਹਿਲਾਂ ਬਣਨ ਵਾਲੇ ਵਰਜਨਾਂ ਨੂੰ ਸਟੀਕੀ ਲੋਕੇਸ਼ਨ ਸਮਰਥਨ ਨਹੀਂ ਹੈ। ਸਫਾਰੀ ਨੂੰ -webkit- ਪ੍ਰੀਫਿਕਸ (ਨਿਚੇ ਦੇ ਉਦਾਹਰਣ ਵੇਖੋ) ਚਾਹੀਦਾ ਹੈ। ਸਟੀਕੀ ਲੋਕੇਸ਼ਨ ਦੇ ਲਈ ਕੰਮ ਕਰਨ ਲਈ ਹੁਣੇ ਹੁਣੇ top, right, bottom ਜਾਂ left ਵਿੱਚੋਂ ਇੱਕ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਹੁੰਦਾ ਹੈ。

相关页面

教程:CSS 定位