Question

我有一个非常简单的jQuery代码片段，它将一个使用position: fixed的类应用于我的页面的导航元素，这样导航就会变得很粘，因此当用户向下滚动时会留在用户身上页。

我正在商务平台上构建它。问题是，当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转换属性。

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

* {
    transform: none !important;
}

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

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

1 个答案: