Question

我正在为一个我正在发布的Android应用程序的小型网站工作，但我遇到一个小问题，我似乎无法找到答案。

在Firefox中，一切正常，但滚动然后点击导航链接（只需使用ID向下移动页面），但在Chrome上，导航会消失，直到您滚动更多。

这些是我应用的唯一样式：

#navBar {
    background-color:#000;
    position:fixed;
    width:100%;
    font-family:sans-serif;
    font-weight:bold;
    font-size:13pt;
    height:70px;
}

编辑：我已经删除了网站上navBar修复的位置，因此您将不再在那里看到问题。问题尚未解决。

您可以使用开发者工具或任何其他等效工具轻松添加固定到navBar元素的位置，以查看问题。

Answer 1

将此添加到导航栏css

时，它适用于我

-webkit-transform: translateZ(0);

制作

#navBar {
    background-color: #000;
    width: 100%;
    position: fixed;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14pt;
    height: 70px;
    -webkit-transform: translateZ(0);
    z-index: 1;
    box-shadow: 0 2.5px 20px #000;
}

Answer 2

使用滚动可能是有益的：

这将使它更加用户友好，因为它很优雅，问题（我想）是因为当前的方法Chrome没有注册位置变化。

$("#button").click(function() {
     $('html, body').animate({
         scrollTop: $("#elementtoScrollToID").offset().top
     }, 2000);
 });

Answer 3

请使用以下代码替换您的css

    nav {
        background: none repeat scroll 0 0 #000000;
        display: block;
        position: absolute;
        margin-left: 115px !important;
        float: left;
        height: 70px;
        margin-left: 10%;
        width: 40%;
    }

Answer 4

我不知道出了什么问题。但是，由于没人接听，我会抛弃我最好的猜测。

以下看起来像是一个很好的候选人：

function switchTabs(e) {
    $('a#currentTab').removeAttr('id');
    $(e).children('a').attr('id','currentTab');
}

id属性不是属性，添加和删除id似乎是一个非常糟糕的主意，因为这是DOM中元素的唯一标识。这是我不会搞砸的事情。此外，您可以轻松地使用类重新创建所需的功能：

function switchTabs(e) {
    $('a.currentTab').removeClass('currentTab');
    $(e).children('a').addClass('currentTab');
}

也许我很幸运？

Answer 5

您应该为元素添加top: 0。无论如何，这将使其与页面顶部对齐。您可能需要在内容包装器的顶部添加填充，以便导航器不会覆盖它。

Answer 6

我刚刚在Chrome和Firefox中添加了两项功能，但它运行良好。我点击链接并滚动了一下，导航保持预期。

For #navBar
position: fixed;

For #wrapper
padding-top: 70px;

滚动并单击后，导航在Chrome中消失

6 个答案: