Question

我的固定标题出现问题。

在我的主页上，固定标题有效。这已经在各种计算机和移动设备上进行了适当的测试。但是，相同的固定标题不会出现在任何其他页面上，例如产品页面或博客文章。

它的作用如下： 1）它忽略固定定位而不会粘在顶部。 2）宽度错误（宽度：1010px）

这是我的jQuery脚本，用于检测用户是否已滚动，以便将类粘贴添加到标头中。

$(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; 
}

我不确定是否应该从网站发布链接，但这是查看the live version的唯一方法。然后，要查看我所描述的错误，请转到菜单中的任意页面，然后切换Chrome控制台的设备工具栏。任何设备都可以。

我做错了什么？

Answer 1

你的问题有两个。

第一部分 - 未应用于身体标签的课程
标题由CSS中的特定选项修复：

body.new-template #header {}

主页上满足此要求，因为body有一个类new-template，因此标题将被修复。

但是，在您的所有其他网页上，body没有此类，因此#header未被修复。

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

第二部分 - Chrome中的一个错误，变换+位置已固定
Chrome中还存在与position: fixed和转换相关的错误。 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() {。

固定的位置不会保持固定

2 个答案: