12

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

在 Firefox 中，一切正常，但是当您滚动然后单击导航链接（只需使用 id 向下移动页面）但在 Chrome 上，导航会消失，直到您再滚动一些。

该网站位于 www.ioudebtcalculator.com

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

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

编辑：我已经从网站上的导航栏中删除了固定位置，因此您将不再在那里看到问题。问题还没有解决。

您可以使用开发人员工具或任何其他等效工具轻松地将固定位置添加到导航栏元素以查看问题。

4

6 回答 6

15

将其添加到导航栏 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;
}
于 2013-07-15T13:50:38.550 回答
5

使用卷轴可能会有所帮助：

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

$("#button").click(function() {
     $('html, body').animate({
         scrollTop: $("#elementtoScrollToID").offset().top
     }, 2000);
 });
于 2013-07-09T11:47:55.890 回答
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%;
    }
于 2013-07-13T10:38:28.170 回答
2

我不知道出了什么问题。但我会抛出我最好的猜测，因为还没有人回答。

以下看起来像是一个很好的搞怪行为的候选者：

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');
}

也许我走运了？

于 2013-07-07T00:43:33.407 回答
0

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

于 2013-07-10T14:55:52.587 回答
0

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

For #navBar
position: fixed;

For #wrapper
padding-top: 70px;
于 2013-07-15T18:12:54.433 回答