CSS位置固定不起作用-粘性導航

Question

我有一小段非常簡單的jQuery代碼，它應用了一個使用position: fixed的類，該類position: fixed在我頁面的導航元素上，這樣導航就變得很粘滯，因此在用戶向下滾動頁面時與用戶保持在一起。

我正在Commerce平台上構建它。 問題是，當position: fixed應用於導航元素時，該屬性似乎無法正常工作。 看起來位置似乎已“固定”，但僅固定在包含在其中的標題區域內，我不知道為什么會發生這種情況。 如果您想親自觀看，請參見以下內容：

http://ts564737-container.zoeysite.com/

您可以看到，在稍微滾動之后，導航元素已固定，但沒有正確顯示。

請在下面查看我的代碼：

的CSS

.fixed {
    top: 0 !important;
    z-index: 100 !important;
    position: fixed !important;
    transition: all 0.3s;
    background-color: #000000;
    opacity: 0.9;
}

JavaScript / jQuery

<script>
var num = 40;

jQuery(window).bind('scroll', function () {
    if (jQuery(window).scrollTop() > num) {
        jQuery('.navigation').addClass('fixed');
    } else {
        jQuery('.navigation').removeClass('fixed');
    }
});
</script>

任何人都可以就這里出了什么問題並導致元素無法正確修復提供任何見解嗎？ 非常感謝任何建議，非常感謝。

Answer 1

這是因為您的某些父母/父母容器包含css transform屬性。

我添加了此CSS，並且您的固定元素開始工作：

* {
    transform: none !important;
}

父級中具有transform屬性的固定元素具有不同的行為。 相關問題