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

Question

我有一小段非常简单的 jQuery 代码，它应用了一个使用 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

这是因为你的 some parent/parents container 包含 css transform 属性。

我已经添加了这个 css，你的固定元素开始工作了:

* {
    transform: none !important;
}

父级中具有变换属性的固定元素具有不同的行为。 Related issue