CSS位置固定不工作 - 粘性导航答案

【问题标题】：CSS Position Fixed Not Working - Sticky NavigationCSS位置固定不工作 - 粘性导航
【发布时间】：2016-10-26 11:01:40
【问题描述】：

我有一小段非常简单的 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>

任何人都可以提供任何关于这里出了什么问题并导致元素无法正确修复的见解吗？任何建议都非常感谢，非常感谢。

【问题讨论】：

我觉得你的代码还不错。但是在您提供的链接下，我找不到任何具有 .navigation 类的元素，这就是您在 jQuery 中的目标。我是否遗漏了什么或者这是否已经解决了您的问题？
我在你的 html 中找不到导航类
在developer.mozilla.org/en-US/docs/Web/CSS/position 上阅读position: fixed 的描述 - 这将解释为什么@gauss 是正确的
抱歉，伙计们，我认为将实际元素重命名为“导航”会有所帮助，这样对你们来说看起来更好。我这样做是因为实际的元素类名称很大而且看起来很乱。我不会再这样做了，因为我看到这引起了问题。感谢您的回答和阅读本文所花费的时间:)

标签： javascript jquery html css

【解决方案1】：

这是因为您的某些父/父容器包含 css 转换属性。

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

* {
    transform: none !important;
}

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

【讨论】：

天才！非常感谢。