sticky屬性不生效：

• 檢查瀏覽器兼容性；
• 檢查是否指定了閾值；
• 檢查 Safari 的供應(yīng)商前綴；
• 檢查祖先元素是否具有overflow屬性集；
• 檢查height父屬性是否未設(shè)置；
• 檢查父元素是否為 Flexbox。
• 檢查瀏覽器兼容性
• 在檢查其他問題之前，最好確保您使用的瀏覽器支持position: sticky.

1、檢查是否已指定閾值

粘性元素需要指定一個閾值：
top:0
right:0
bottom:0
left:0
這幾個屬性必須寫一個
例如：
.sticky {
    position：stickty；
    kop：0；
}

2、檢查 Safari 的供應(yīng)商前綴

確保為屬性值添加供應(yīng)商前綴以支持低于 13 的 Safari 版本，例如，如下所示：
.sticky {
    position：-webkit-sticky;
    position：sticky；
    tokp：0；
}

3、檢查祖先元素是否具有overflow屬性集

如果粘性元素的任何父/祖先設(shè)置了以下任何屬性overflow，
position: sticky將不起作用（除非您在溢出容器上指定高度）：
overflow: hidden
overflow: scroll
overflow: auto
檢查具有overflow屬性集的父母的片段：
只需在瀏覽器的 Web 開發(fā)人員控制臺中復(fù)制/粘貼以下代碼片段，即可識別overflow屬性設(shè)置為 以外的所有父元素visible：
let parent = document.querySelector('.sticky').parentElement;
while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}
如何使用position: sticky該overflow屬性？
通過在溢出容器上指定高度，您應(yīng)該能夠position: sticky在容器元素設(shè)置overflow屬性的同時進行工作。

4、檢查height父屬性是否未設(shè)置

如果父元素沒有設(shè)置 height，則粘性元素在滾動時將沒有任何可粘附的區(qū)域。
發(fā)生這種情況是因為粘性元素旨在在容器的高度內(nèi)粘附/滾動。

5、檢查父元素是否是 Flexbox

如果粘性元素的父元素是彈性盒，則有兩種情況需要檢查：

粘性元素已align-self: auto設(shè)置（默認(rèn)設(shè)置）；
粘性元素已align-self: stretch設(shè)置。
如果粘性元素已align-self: auto設(shè)置：
在這種情況下， 的值align-self將計算為父項的align-items值。
因此，如果父級有align-items: normal（默認(rèn)設(shè)置）或align-items: stretch設(shè)置，
則意味著粘性元素的高度將拉伸以填充整個可用空間。這將沒有空間讓粘性元素在父元素中滾動。

如果粘性元素已align-self: stretch設(shè)置：
在這種情況下，粘性元素會拉伸到父元素的高度，并且沒有任何區(qū)域可以滾動。

如何使粘性元素在 Flexbox 中可滾動：
您可以簡單地將屬性的值設(shè)置align-self為align-self: flex-start。這會將粘性元素放在開頭并且不會拉伸它。

到此這篇關(guān)于CSS中Position:Sticky不起作用的問題解決的文章就介紹到這了,更多相關(guān)CSS Position:Sticky不起作用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論