固定位置不保持固定

Question

我的固定标题有问题。

在我的主页上，固定的标题起作用了。这已经在各种计算机和移动设备上进行了适当的测试。然而，相同的固定标题不会出现在任何其他页面上，比如产品页面或博客帖子。

它所做的事情如下: 1)它忽略了固定的位置，不坚持顶部。2)宽度错误(宽度: 1010px)

这是我的jQuery脚本，用于检测用户是否滚动过，以便将类sticky添加到标题。

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){
        $("body.new-template #header").addClass("sticky");
    } else {
        $("body.new-template #header").removeClass("sticky");
    };
});

这是我的css。

body.new-template #header { 
 position: relative; top: 0; left: 0; 
}
body.new-template #header.sticky { 
    position: fixed; z-index: 100; width: 100%; 
    background-color: white; top: 0; left: 0;
    -webkit-box-shadow: 0px 3px 10px #ccc; 
    -moz-box-shadow: 0px 3px 10px #ccc;  
    box-shadow: 0px 3px 10px #ccc; 
}

我做错了什么？

Answer 1

你的问题有两个方面。

第一部分-未应用于主体标记的类

标题由CSS中的此特定选择固定：

body.new-template #header {}

这在主页上得到了满足，因为body有一个类new-template，因此标题将是固定的。

但是，在所有其他页面上，body没有这个类，因此#header没有得到修复。

您可以从CSS的选择器中删除body.new-template，或者将new-template类添加到要固定标题的每个页面的body标记中。

第二部分-使用transform +位置固定的chrome中的错误

此外，Chrome中还有一个与position: fixed和转换相关的bug。https://bugs.chromium.org/p/chromium/issues/detail?id=20574

这里有一个转换正在破坏您的position: fixed

body.new-template #page {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

因此，删除它并添加.new-template类来解决您的问题。

Answer 2

请将您的代码$(window).scroll(function() {...放入$(document).ready(function() {中。