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

Question

我正在为一个我正在发布的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;
}

编辑:我已经从网站上的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);
 });