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属性的固定元素具有不同的行为。 相关问题