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

Posted 2023-04-13

【中文标题】滚动并单击后，导航在 Chrome 中消失

【英文标题】：Navigation Disappearing in Chrome after scrolling and clicking

【发布时间】：2013-07-04 16:29:46

【问题描述】：

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

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

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

【问题讨论】：

您的视口声明中有错字。它应该是“初始规模”而不是“初始规模”。不确定它是否相关，但您应该更正并检查。

谢谢你，我已经更新了正确的拼写，但问题似乎还在继续。

见下面 Matthew R 的回答。设置top: 0; 应该可以。或尝试position: absolute; top: 0;，如果有故障

它似乎无法修复它，我无法同时拥有绝对位置和固定位置。

那么我们现在在哪里可以看到您的问题？ :|

【参考方案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;

【讨论】：

就是这样做的。由于移动设备，我已经采取了 position:fixed for now，但这解决了 Chrome 的问题。

亲爱的上帝。我一直在努力解决一个错误，在该错误中，chrome 垂直滚动导致元素在整个页面中间歇性地出现/消失。我为此沮丧地撕了脸。谢谢。

【参考方案2】：

使用卷轴可能会有好处：

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

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

【讨论】：

我还没有尝试过，因为添加了额外的 javascript，但这可能是唯一的解决方案。如果这是解决方案，那么 Chrome 的位置固定存在一些问题......

我认为它的位置随着脚本的变化而存在问题。

第二次@SMillerNL 在这里。 Opera Mobile 曾经与position: fixed; 有类似的问题。它与滚动后重绘页面的方式有关。您甚至可以通过在滚动后将鼠标悬停在具有已定义 :hover 状态的按钮上来重绘按钮。使用 jQuery 的 animate() 强制引擎重绘可能是您最好的选择。您始终可以缩短动画以使其行为类似于当前状态。

这可能是我最终要使用的，但由于添加了 JavaScript，它并不是我想要的。不过，我已经对你投了赞成票，感谢你的尝试。

【参考方案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%;
    

【参考方案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');
 

也许我走运了？

【讨论】：

不幸的是，这对我没有帮助。如果您想继续提供帮助，我已经进行了这些更改并将它们推送到服务器。感谢您的尝试。

【参考方案5】：

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

【讨论】：

感谢您的尝试，但这并没有。

【参考方案6】：

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

For #navBar
position: fixed;

For #wrapper
padding-top: 70px;